如何修復此固定的導航欄淡入

Question

我有一個固定的導航欄。 我希望僅在將頁面滾動到某個位置后才顯示初始菜單。 我沒有做過工作，但是當我在頂部回滾時，出現未顯示初始菜單的菜單。 我在css中將該類定義為不顯示。 你能幫我嗎？ 提前thnx。

$(function(){

    var menu = $('#menu'),
        pos = menu.offset();

        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });

});

http://jsfiddle.net/VjfHg/

編輯：嘿，謝謝您的所有答復，所有的都在工作，對不起，如果我要加粗，但是您能幫助我將其顯示到某個位置嗎？比如說您滾動500px然后在相同位置淡出？:)

Answer 1

else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
            menu.fadeOut('fast', function(){
                $(this).removeClass('fixed').addClass('default').fadeOut('fast');
            });
        }

代替使用fadeIn淡入

Answer 2

發生這種情況的原因是此行

$(this).removeClass('fixed').addClass('default').fadeIn('fast');

添加類“默認”后，您可以使用fadeIn函數。 jQuery的檢測到淡入效果被施加到具有一個元件display:none ，並增加了新的CSS樣式到該div是display: block

有兩種解決方法。

jQuery方式

更改

$(this).removeClass('fixed').addClass('default').fadeIn('fast');
                          TO 
$(this).removeClass('fixed').addClass('default');

jQuery Way演示

CSS方式

更改.default類中的以下行。

display:none; 
     TO
display:none !important;

CSS Way演示

Answer 3

您必須像下面那樣修改else循環（才能使用fadeOut ）：

fadeIn通過將匹配的元素淡化為不透明來顯示匹配的元素 ，而fadeOut通過將它們的淡化為透明來隱藏匹配的元素 。

else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeOut('fast');
                });

工作演示

編輯：根據問題中的更改更新了工作演示 。