Question

我使用JQuery路点尝试用鼠标滚动触发事件。但页面本身并不滚动。我正在使用＆＃34; waypoint＆＃34; 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的相关部分（请注意，这只是一个部分。其余的将在最后一个小提琴）：

#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.");
    })
});

具体问题是，＆＃34;为什么航点没有被拿起？＆＃34;但更广泛的问题是，像这样的div需要在屏幕上显示为Waypoints（即显示：块）吗？或者它们可以被隐藏并且只是在后台使用？这是一个小提琴。请注意，目前，单击将执行滚动应该执行的操作。但卷轴应该提醒，但事实并非如此。

http://jsfiddle.net/rcJP9/

出于某种原因，点击不适合小提琴。但是整页的div应该向上滑动以揭示其背后的内容。

Answer 1

根据this jsFiddle，我会说当没有显示时，id锚点不会注册。

这样的事情怎么样？应该是几乎看不见的，但仍然把它放在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。似乎工作！

是否需要显示div作为航点？

1 个答案: