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

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

您可以使用传递给 Waypoints 中回调的 direction 参数，并根据该参数的值是"向下"还是"向上"淡入右不透明度：

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