Question

我正在尝试fixed标题部分。我能够做到这一点但是在使用JS添加新类is-sticky时它会发抖。当向下滚动时，它从动画的top:0;开始。出于这个原因，它在摇晃并从顶部开始时看起来很奇怪。我希望它能在顶部顺利修复，不会影响访客的眼球。就像这个网站http://www.lazada.com.my/一样这是我的demo。

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<body>
  <div id="scroller">Some controls</div>
</body>

＆＃13;

Answer 1

来自您链接的网站的效果实际上非常容易。

首先，您希望标题元素包含position: fixed;没有必要通过javascript动态添加它。默认情况下它应具有此属性（如您在链接的网站中所示）。

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

你可以使用jquery来做到这一点。

<强> DEMO

＆＃13;

var $el = $('header .two');
$(window).scroll(function(){
    if ($(this).scrollTop() > 200) {
        $el.addClass('hide');
    } else {
        $el.removeClass('hide');
    }
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Jsfiddle

Answer 3

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

向下滚动时标题固定了shacking

3 个答案: