粘滞头滑下效果

时间:2014-10-09 19:45:13

标签: jquery html css

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

它工作正常,但我想要“降低顶部效果”我能做到吗?

谢谢!

4 个答案:

答案 0 :(得分:4)

为了平滑下滑动画,您可以尝试以下操作:
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。然后将其向下滑动以使其可见。如果用户向上滚动并低于200px,则移除fixed类,并通过style功能删除添加到sticky的{​​{1}}属性。希望这会有所帮助。我尝试了它,它的工作方式与www.walmart.com

完全相同

答案 1 :(得分:0)

我对css的东西不多,但我想这可能有用:

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

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

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

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

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