Question

我有一个固定的导航栏。我希望只有在您将页面滚动到某个位置后才能显示初始菜单。我做了工作，但当我向上滚动菜单时，显示初始未显示。我把css中的类定义为display none。你可以帮帮我吗？ 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使用fadeOut

Answer 2

发生这种情况的原因是这一行

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

添加“默认”类后，您可以使用 fadeIn 功能。 jQuery检测到fadeIn效果正在应用于具有display:none的元素，并向该div添加了一个新的CSS样式display: block

有两种解决方法。

Jquery Way

更改

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

<强> jQuery Way Demo

CSS方式

更改.default类中的以下行。

display:none; 
     TO
display:none !important;

CSS Way Demo

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

Working Demo

编辑： Updated Working Demo根据问题的变化。

如何修复此固定导航栏淡入

3 个答案: