jQuery 固定菜单试图淡入淡出

Question

我已经创建了一个固定菜单，但无法弄清楚 jQuery 使其在启动时淡入，然后在我向上滚动时淡出。

当我向上滚动并固定菜单淡出时，顶部的菜单应该保留。

这是一个最能说明我需要帮助的链接

http://jsfiddle.net/Boardtalk/oh2avwoq/2/

这是 jQuery

jQuery("document").ready(function($){

    var nav = $('#nav-main');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 136) {
            nav.addClass("fixed-nav");
        } else {
            nav.removeClass("fixed-nav");
        }
    });

});

这是 CSS

.fixed-nav { 
z-index: 9999; 
position: fixed; 
top: 0; 
width: 95%;
border: 5px solid transparent;
border-radius: 0 0 7px 7px;
max-width: 1133px;
background-color: #cadceb;
margin: 0 -10px !important;
padding: 2px 5px !important;

}

感谢阅读，希望对您有所帮助。我已经搜索了几天，但找不到解决方案。

http://jsfiddle.net/Boardtalk/oh2avwoq/2/

Answer 1

我不太确定我理解了。但是你试过这个吗？

jQuery("document").ready(function($){

    var nav = $('#nav-main');

    $(window).scroll(function () {
        if ($(this).scrollTop() >= 136) {
            nav.addClass("fixed-nav").fadeIn("slow");
        } else {
            nav.removeClass("fixed-nav").fadeOut("slow");
        }
    });

});

编辑:

在这种情况下，您只需要一个 CSS 过渡来提供动画。我已经更新了你的 fiddle .

#nav-main {
    transition: all 0.5s ease;
}