jquery - 粘头向下滑动效果

$(window).scroll(function(){
         var sticky = $('.top-menu'),
         scroll = $(window).scrollTop();

        if (scroll >= 200){
            sticky.addClass('fixed');
        }else{
            sticky.removeClass('fixed');
        }
    });

固定CSS

.fixed{
    position: fixed;
    background: red;
    z-index: 1;
}

它可以正常工作，但是我想“降低最佳效果”可以吗？

谢谢！！

最佳答案

为使幻灯片动画流畅，您可以尝试以下操作：
JS代码：

$(window).scroll(function(){
         var sticky = $('.top-menu'),
         scroll = $(window).scrollTop();
        if (scroll >= 200){
            sticky.addClass('fixed');
            sticky.slideDown(1000);
        }else{
            sticky.removeClass('fixed');
            sticky.removeAttr("style"); //slideDown adds the style="block" which needs to be removed so that next time slideDown will work
        }
    });

CSS代码：

.fixed{
    position: fixed;
    background: red;
    z-index: 1;
    display:none;
}

这里的逻辑是：在200px滚动后添加“固定”类。此时，通过添加的CSS类，sticky将成为display:none。然后向下滑动使其可见。如果用户向上滚动并低于200px，则删除fixed类，并删除通过style函数添加到sticky的slideDown()属性。希望这会有所帮助。我尝试了它，它像www.walmart.com一样完美地工作

关于jquery - 粘头向下滑动效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26286744/