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

这里的逻辑是;添加＆＃39;固定＆＃39; 200px滚动后的课程。目前，sticky将通过添加的CSS类display:none。然后将其向下滑动以使其可见。如果用户向上滚动并低于200px，则移除fixed类，并通过style功能删除添加到sticky的{{1}}属性。希望这会有所帮助。我尝试了它，它的工作方式与www.walmart.com

完全相同

Answer 2

我对css的东西不多，但我想这可能有用：

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

            sticky.slideUp();
            sticky.removeClass('fixed');
        }

Answer 3

您应该研究CSS转换和转换属性。

转换将控制对象动画的速度。
变换将控制对象的变换。（即高度从0到100px）

学习CSS3的一个很好的资源是here，您应该完成本教程。

Answer 4

你可以尝试添加这样的代码，这样你就不必指定像素的高度：

var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;

function onScroll(e) {
  window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
                                  sticky.classList.remove('fixed');
}

document.addEventListener('scroll', onScroll);

粘滞头滑下效果

4 个答案: