導航菜單在滾動時淡入

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

剛剛更正了您的代碼！ 工作正常！