修正了向下滚动时标题抖动的问题

Fixed header shaking when scrolling down

本文关键字：标题 抖动 问题 滚动      更新时间：2023-09-26

当我使用fixed标头时，添加is-sticky时它会抖动CSS类。它从top:0;开始，因为它在向下滚动时是动画。我希望它能平稳地固定在顶部，不会引起明显的抖动。例如：http://www.lazada.com.my/
这是我的演示。

$(window).load(function(){
  $(window).scroll(function(){
    if($(window).scrollTop()>0){
      if( ! ($('#scroller').hasClass('is-sticky'))) {
        $('#scroller')
        .addClass('is-sticky')
        .css('top',9)
        .animate({
          'top': 84
        },'1000');
      }

    } else {
      if($('#scroller').hasClass('is-sticky')) {
        $('#scroller')
        .removeClass('is-sticky')
        .css('top',9)
        .animate({
          'top':84
        },1000);
      }
    }
  });
});
body{
    height:1000px;
    margin:0;
    padding:0;
    position:relative;
}
#scroller {
    position: absolute;
    left: 0;
    top: 84px;
    width: 100%;
    z-index: 30;
    background:#CCC;
    height:20px;
}
#scroller.is-sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 9px;
    margin-top: -31px;
    height: 53px;
    z-index: 701;
    background: #CCC;
    opacity: .97;
    filter: alpha(opacity = 97);
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<body>
  <div id="scroller">Some controls</div>
</body>

从您链接的网站来看，效果实际上很容易做到。

首先，您希望您的头元素具有position: fixed；不需要通过javascript动态添加。默认情况下，它应该具有此属性（如您链接的网站中所示）。

他们正在做的是隐藏顶部导航，该导航位于某个滚动点的header内。

您可以使用jquery非常简单地完成此操作。

演示

var $el = $('header .two');
$(window).scroll(function(){
    if ($(this).scrollTop() > 200) {
        $el.addClass('hide');
    } else {
        $el.removeClass('hide');
    }
});
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
header .one {
    height: 20px;
    width: 100%;
    background: lime;
    position: relative;
    z-index: 10;
}
header .one.hide {
    height: 0;
}
header .two {
    background: red;
    height: 40px;
    position: relative;
    z-index: 20;
    -webkit-transition: -webkit-transform .25s;
    transition: transform .25s;
}
header .two.hide {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}
main {
    background: lightblue;
    height: 1200px;
    width: 100%;
    padding-top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
    <div class="one">div</div>
    <div class="two">fixed</div>
</header>
<main>
    content
</main>
<footer>footer</footer>

当达到84时，必须检查.scrollTop。此外，您不需要使用jquery .animate函数，您可以通过css transition实现该效果。

Jsfddle

您可以创建一个固定的导航条，并将其垂直分为两部分，当用户滚动时，只使用.slideUp()动画隐藏上面的部分，而当用户再次滚动到顶部时，则使用.slideDown()动画显示它。这是代码：

$(window).load(function(){
  $(window).scroll(function(){
    if($(window).scrollTop()>0){
      //check if it is visisble
      if($('#nav-part-to-hide').is(':visible')) {
        //if yes then lets hide it
        $('#nav-part-to-hide').slideUp();           
      }
    } else {
      if(!$('#nav-part-to-hide').is(':visible')) {
        $('#nav-part-to-hide').slideDown();        
      }
    }
  });
});
body
{
  height:1000px;  
}
#sticky-navbar
{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:80px;
}
#nav-part-to-hide
{
  height:40px;
  width:100%;
  background:#333;
  color:#fff;
}
#nav-part-stays
{
  height:40px;
  width:100%;
  background:#bbb;
  color:#333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <div id="sticky-navbar">
    <div id="nav-part-to-hide">
      this conetent hides
    </div>
    <div id="nav-part-stays">
      this conetent stays on page
    </div>
  </div>  
</body>

相关文章：