jquery - 是否需要显示 div 才能用作航路点？-6ren

jquery - 是否需要显示 div 才能用作航路点？

转载作者：太空宇宙更新时间：2023-11-04 13:28:43

我正在使用 JQuery 航路点来尝试通过鼠标滚动触发事件。但是页面本身没有滚动。我使用“航点”div 作为触发器，因为其中包含内容的 div 不应该滚动。但是航路点 div 目前没有注册。所以问题是，由于 div 本身没有滚动条，而我只是在监听滚动事件，我是否需要用 display:block 显示航路点 div，即使它们没有内容？

也许查看标记会更有助于理解问题。这是 HTML:

<body>
    <div id="container">
        <header>
            <p class="homeLink">Words N' Pics</p>
            <div id="menuButton"><img class="menuIcon" src="images/menuIcon.png"/></div>
        </header>
        <div id="waypointOne"></div>
        <div id="waypointTwo"></div>
        <div id="waypointThree"></div>
        <div id="waypointFour"></div>
        <div id="slideOne" class="slider">
            <div class="sliderPic"><img src="images/Sgt-Bilko.jpg"/></div>
            <div class="sliderText"><p>This is come content just chilling right here.</p></div>
        </div>
        <div id="slideTwo" class="slider">
            <div class="sliderPic"><img src="images/Sgt-Bilko.jpg"/></div>
            <div class="sliderText"><p>This is come content just chilling right here.</p></div>
        </div>
        <div id="slideThree" class="slider">
            <div class="sliderPic"><img src="images/Sgt-Bilko.jpg"/></div>
            <div class="sliderText"><p>This is come content just chilling right here.</p></div>
        </div>
        <div id="slideFour" class="slider">
            <div class="sliderPic"><img src="images/ralph.jpg"/></div>
            <div class="sliderText"><p>This is come content just chilling right here.</p></div>
        </div>
    </div>
    <footer>
        <div id="arrowJumper"><img class="arrowIcon" src="images/greyArrow.png"/></div>
    </footer>
    <div id="menuOverlay" class="menuDiv">
        <ul id="menu">
            <li>Work.</li>
            <li>About.</li>
            <li>Careers.</li>
            <li>Ideas.</li>
            <li>News.</li>
            <li>Events.</li>
            <li>Contact.</li>
        </ul>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/waypoints.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
</body>

这是我的 CSS 的相关部分(请注意，这只是一个片段。其余的将在最后的 fiddle 中):

#waypointOne{
    position:absolute;
    top:150px;
}

#waypointTwo{
    position:absolute;
    top:250px;
}

#waypointThree{
    position:absolute;
    top:350px;
}

#waypointFour{
    position:absolute;
    top:450px;
}

和 Jquery:

$(function () { // When the page has loaded,
    $('#waypointOne').waypoint(function () {
        alert("Waypoint 1 reached.");
    })
});

$(function () { // When the page has loaded,
    $('#waypointTwo').waypoint(function () {
        alert("Waypoint 2 reached.");
    })
});

$(function () { // When the page has loaded,
    $('#waypointThree').waypoint(function () {
        alert("Waypoint 3 reached.");
    })
});

具体问题是，“为什么航路点没有被拾取？”但更广泛的问题是，像这样的 div 是否需要显示在屏幕上才能被 Waypoints 定位(即显示: block )？还是可以将它们隐藏并仅在后台使用？这是一个 fiddle 。请注意，目前，单击将执行滚动应该执行的操作。但卷轴应该是警报，但它不是。

http://jsfiddle.net/rcJP9/

由于某种原因，点击在 fiddle 中不起作用。但是整页 div 应该向上滑动以显示其背后的内容。

最佳答案

基于 this jsFiddle , 我要说的是 id anchor 在不显示时不注册。

这样的事情怎么样？应该是几乎不可见的，但仍然保持在 dom 中的位置......

.visually-hidden { /*http://developer.yahoo.com/blogs/ydn/posts/2012/10/clip-your-hidden-content-for-better-accessibility/*/
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
} 
body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; }

这里是 another jsFiddle有了那个。似乎有效!

关于jquery - 是否需要显示 div 才能用作航路点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23521696/