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

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

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

如何确定 jQuery 中窗口的高度和滚动位置？

Answer 2

您可以direction在 Waypoints 中使用传递给回调的参数，并根据该参数的值是“down”还是“up”淡化到正确的不透明度：

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