导航菜单在滚动时淡入

Question

我正在设计一个网站，当我向下滚动> 50px时，希望导航菜单消失。 我在JQuery库中使用以下JavaScript：

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

        $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('.menu').fadeIn(500);
            } else {
                $('.menu').fadeOut(500);
            }
        });

    });
})(jQuery);

.menu类在{display: none;} 。

Answer 1

这应该工作

$(document).ready(function(){
       $(window).bind('scroll', function() {
       var distance = 50;
             if ($(window).scrollTop() > distance) {
                 $('nav').fadeIn(500);
             }
             else {
                 $('nav').fadeOut(500);
             }
        });
    });

Codepen演示

Answer 2

它为我工作。

您的.menu可能位于页面顶部，而滚动时则看不到它。

加入测试：

.menu {
    position: fixed;
    z-index: 10000; //just to check if it is behind the content
}

演示

Answer 3

尝试这个：

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 50) {
            $('.menu').fadeIn(1000);
        } else {
            $('.menu').fadeOut(1000);
        }
    });
});

刚刚更正了您的代码！ 工作正常！