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

【问题标题】：Making a sidebar menu fade in then fade back out使侧边栏菜单淡入然后淡出
【发布时间】：2013-09-10 19:52:43
【问题描述】：

我正在使用一个单页网站，该网站依靠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/

任何帮助将不胜感激。

【问题讨论】：

不要只发布指向外部网站的链接。发布相关代码以及您遇到的问题

标签： jquery fadein jquery-waypoints

【解决方案1】：

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

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

【讨论】：

我是一个新的 jQuery 用户。您介意更详细地了解如何实现吗？

【解决方案2】：

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

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

【讨论】：