Question

我正在设计一个网站，当我向下滚动＆gt; 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 Demo

Answer 2

这对我有用。

您的.menu可能位于页面的顶部，当您滚动时，您无法看到它。

添加测试：

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

DEMO

Answer 3

试试这个：

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

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

导航菜单淡入滚动

3 个答案: