jquery - 粘头向下滑动效果

Question

$(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;
}

它工作正常，但我想要一个“顶部效果的下滑”，我可以这样做吗？

谢谢!!

Answer 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 滚动后添加“固定”类。此时 sticky 将通过添加的 CSS 类变为 display:none。然后将其向下滑动以使其可见。如果用户向上滚动并低于 200 像素，则删除 fixed 类并删除通过 slideDown() 添加到 sticky 的 style 属性> 功能。希望这会有所帮助。我试过了，它像www.walmart.com一样完美地工作