Tiêu đề dính - buggy nhảy trên di chuyển

Question

Tôi có một vấn đề cụ thể khi tạo tiêu đề dính với jQuery. Tôi đã thử các đoạn trích được sử dụng phổ biến trên web, nhưng tôi nhận thấy cùng một thứ lỗi trên khắp mọi nơi.

Với chiều cao tài liệu cụ thể (có thể cuộn cho đến khi có ít hơn gọi là hiệu ứng dính), tiêu đề dính nhảy giữa position: fixed và 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; 
} 

Tôi cũng đã thử một lề dưới trên #not-sticky có cùng chiều cao như #sticky để giữ chiều cao tài liệu không đổi, nhưng cùng một hiệu ứng nhảy liền xảy ra.

Bất kỳ ý tưởng nào để khắc phục điều đó?

Answer 1

Cuộn lửa quá nhiều lần và cố gắng đặt thành phần style sẽ luôn luôn & chắc chắn tạo ra các bước nhảy (thậm chí hầu như không đáng chú ý nhưng vẫn còn xù xì).

Cách tốt nhất mà tôi đã tìm thấy là

1. bản sao yếu tố của chúng tôi,
2. mà làm sao chép fixed
3. chơi với phong cách bản sao của visibility.

JS tinh khiết:

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

Vì vậy, khi bạn nhìn thấy "tiêu đề" sửa chữa, đó là thực bản sao cố định của chúng tôi nhận được có thể nhìn thấy trên đầu.