粘滞头 - 跳在滚动上的越野车

时间:2013-05-13 01:36:20

标签: javascript jquery css sticky

我在使用jQuery创建一个粘性标头时遇到了一个特定的问题。我尝试了网络上常用的片段,但我到处都看到了同样的错误。

在特定文档高度(可滚动直到调用粘滞效果)之后,粘性标题会在position: fixedposition: static之间跳转。

HTML:

<header>
  <div id="not-sticky"></div>
  <div id="sticky"></div>
</header>
<div id="content"> ...


jQuery的:

var $sticky = $("#sticky");
var offset = $sticky.offset();
var stickyTop = offset.top;
var windowTop = $(window).scrollTop();
$(window).scroll(function() {
  windowTop = $(window).scrollTop();
  if (windowTop > stickyTop) {
    $sticky.css({
      position: 'fixed',
      top: 0
    });
  }
  else {
    $sticky.css({
      position: '',
      top: ''
    });
  }
});


CSS:

header {
  width: 100%;
}

#not-sticky {
  padding: 50px 0;
  width: 100%;
}

#sticky {
  padding: 24px 0;
  position: relative;
  width: 100%;
  z-index: 25;
}


我还在#not-sticky上尝试了与#sticky高度相同的边距底部,以保持文档高度不变,但发生了相同的跳跃粘性效果。 / p>

有什么想法解决这个问题吗?

1 个答案:

答案 0 :(得分:13)

滚动次数过多,尝试设置元素style将始终&amp;不可避免地会产生跳跃(甚至几乎没有引人注目但仍然是锯齿状的)。

我发现的最好方法是

  1. 克隆我们的元素,
  2. 制作克隆fixed
  3. 使用克隆的visibility样式。
  4. 纯JS:

    &#13;
    &#13;
    ;(function(){ /* STICKY */
    
      var sticky  = document.getElementById("sticky"),
          sticky2 = sticky.cloneNode(true);
    
      sticky2.style.position = "fixed";
      document.body.appendChild(sticky2);
    
      function stickIt(){
        sticky2.style.visibility = sticky.getBoundingClientRect().top<0 ? "visible" : "hidden";
      }
    
      stickIt();
      window.addEventListener("scroll", stickIt, false );
    }());
    &#13;
    #sticky{
      height:100px;
      background:#ada;
      height:50px;
      position:relative;
      /* needed for clone: */
      top:0; 
      width:100%;
    }
    
    
    /* Just for this demo: */
    *{margin:0;padding:0;}
    #content{height:2000px; border:3px dashed #444;}
    h1{padding:40px; background:#888;}
    &#13;
    <h1>Logo</h1>
    <div id="sticky">Sticky header</div>
    <div id="content">Lorem ipsum...<br>bla bla</div>
    &#13;
    &#13;
    &#13;

    所以当你看到&#34;标题&#34; 修复,实际上我们的固定克隆在顶部可见。