スティッキーヘッダー - スクロールのバギージャンプ

Question

jQueryで固定ヘッダーを作成する際に特に問題があります。私はウェブ上で一般的に使用されているスニペットを試しましたが、私はどこでも同じバギーを知っていました。

スティッキーヘッダーは、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; 
} 

ドキュメントの高さを一定に保つために#stickyと同じ高さの#not-stickyにマージンボトムを試しましたが、同じジャンプスティッキー効果が発生しました。

それを修正するためのアイデアはありますか？

Answer 1

スクロールが頻繁に行われ、要素を設定しようとするとstyleは常に&がジャンプを作成することがあります（ほとんど目立ちませんが、まだジャギー）。

私が見つけた最良の方法は

1. クローンたちの要素、クローンのvisibilityスタイルでfixed
2. プレイのクローンを作成
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>

だから、それは実際にトップ見え取得私たちの固定されたクローンです。