javascript - 导航菜单在滚动时淡入

Question

我正在设计一个网站，我希望导航菜单在我向下滚动 >50 像素后淡入。我将以下 JavaScript 与 JQuery 库一起使用:

(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