1

我有一个固定的导航栏。我希望只有在您将页面滚动到某个位置后才显示初始菜单。我做了 thaa 工作，但是当我回到顶部时，会出现未显示初始菜单的菜单。我将css中的类定义为不显示。你能帮我解决这个问题吗？提前谢谢。

$(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 然后在同一个位置淡出之后？:)

4

3 回答 3

1

发生这种情况的原因是这条线

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

添加类 'default' 后，您将使用fadeIn函数。jQuery 检测到 fadeIn 效果正在应用于一个元素，该元素具有display:none并向该 div 添加新的 CSS 样式，该样式是display: block

有两种方法可以解决这个问题。

jQuery 方式

改变

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

jQuery 方式演示

CSS方式

更改 .default 类中的以下行。

display:none; 
     TO
display:none !important;

CSS方式演示

于 2013-09-05T07:10:19.807 回答
1 
else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
            menu.fadeOut('fast', function(){
                $(this).removeClass('fixed').addClass('default').fadeOut('fast');
            });
        }

代替淡入淡出使用淡出

于 2013-09-05T07:09:32.600 回答
1

你必须修改你的else循环如下（使用fadeOut）：

fadeIn 通过将匹配的元素淡化为不透明来显示匹配的元素，而通过fadeOut 将匹配的元素淡化为透明来隐藏它们。

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

工作演示

编辑： 根据问题的变化更新了工作演示。

于 2013-09-05T07:11:50.460 回答