滚动页面时固定头部抖动的解决方法

Question

滚动页面时固定头部抖动的解决方法

5

当我使用固定头部时，添加我的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>

- Lemon Kazi

3个回答

2

当 .scrollTop 到达 84 时，您需要进行检查。此外，您不需要使用 jQuery 的 .animate 函数，可以通过 CSS 的 transition 实现该效果。

Jsfiddle

- Alex

@Lemon Kazi 这解决了你的问题吗？ - Alex

为什么你在回答中向OP征求回复，而他并没有发表评论？你正在滥用评论系统；像你这样的声望水平不应该这样做... - justinw

@alirezasafian 是的，你的答案也是正确的。我移除了animate函数并应用了transition。给你加1分。 - Lemon Kazi

0

您可以创建一个固定的导航栏，并将其垂直分成两部分。当用户滚动时，只需使用.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>

- Zeus

谢谢，我正在尝试并得到了您的帮助。 - Lemon Kazi

我应用了你的代码。http://www.discountshop.com.bd/ 它没有动画效果。如果我漏掉了什么，请建议。 - Lemon Kazi

@LemonKazi 嗯，我提供的代码在点击运行代码片段时可以工作，所以我认为这个代码没有问题。该网站有很长的代码，我没有时间全部查看，因此无法确定您在哪里出错。但是，根据网站的行为，似乎包含搜索栏的 div 在页面加载时并没有真正固定在顶部，而是当您滚动时才固定，因此请将该搜索栏 div 放在页面的固定部分。 - Zeus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- justinw · Accepted Answer

从您提供的网站链接来看，实现效果其实很简单。

首先，您需要让您的标题元素具有position: fixed属性；无需通过javascript动态添加此属性。它应该默认具有此属性（如您提供的网站所示）。

他们所做的是在特定滚动点隐藏位于header内部的顶部导航。

您可以使用jquery来非常简单地实现这一点。 DEMO

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>