粘性标题 - 滚动跳跃的越野车

Question

我在使用jQuery制作粘性标题时遇到了特定的问题。我尝试了网络上常用的片段，但我在各处都看到了同样的bug。

在特定的文档高度（可滚动直到超过要求的粘性效果），粘性标题在position: fixed和position: 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相同，以保持文档高度不变，但发生同样的跳跃粘性效果。

任何想法来解决这个问题？

Answer 1

滚动发射太多次，并试图设置一个元素style将始终&不可避免地创建跳转（即使几乎没有引人注意，但仍然很棘手）。

我已经找到了最好的办法是

1. 克隆我们的元素，
2. 作出这样的克隆与克隆的visibility风格fixed
3. 发挥。

纯JS：

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

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

<h1>Logo</h1> 
 
<div id="sticky">Sticky header</div> 
 
<div id="content">Lorem ipsum...<br>bla bla</div>

所以，当你看到 “头” 修复，这实际上是我们的固定克隆的顶部越来越明显。