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; }

jQuery Fixed Menu尝试淡入fadeOut

1 个答案: