Question

我正在使用依赖jQuery Waypoints的单页网站，一旦用户向下滚动，就会显示侧面导航。

我目前正在正确显示菜单，但是当用户向上滚动到顶部时我需要再次隐藏菜单，因为页面顶部会有一个主导航。

HTML：

<div id="side-nav" style="opacity: 0; ">
    <ul class="cf">
        <li><a href="#top">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#events">Events</a></li>
        <li><a class="last" href="#stay">Stay</a></li>
    </ul>
</div>

JS：

$(function () {
    $('#side-nav').css('opacity', 0);
    $('#side-nav').waypoint(function () {
        $('#side-nav').animate({
            opacity: 1
        }, 'slow');
    }, {

    });
});

小提琴：http://jsfiddle.net/GK6Mf/

非常感谢任何帮助。

Answer 1

使用此其他帖子，您可以了解如何确定滚动条所处的位置。从那里，您可以隐藏/显示侧边导航，当它位于您想要的区域时。

How do I determine height and scrolling position of window in jQuery?

Answer 2

您可以使用在Waypoints中传递给回调的direction参数，并根据该参数的值是“向下”还是“向上”渐变为正确的不透明度：

$('#side-nav').css('opacity', 0);
$('#side-nav').waypoint(function (direction) {
    $('#side-nav').animate({
        opacity: direction === 'down' ? 1 : 0
    }, 'slow');
});

使侧边栏菜单淡入然后淡出

2 个答案: