चिपचिपा हैडर - स्क्रॉल

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

सीएसएस:

header { 
    width: 100%; 
} 

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

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

मैं भी #sticky रूप में एक ही ऊंचाई के साथ #not-sticky पर एक margin-bottom की कोशिश की एक निरंतर दस्तावेज़ ऊंचाई रखने के लिए, लेकिन एक ही उछल चिपचिपा प्रभाव उत्पन्न हुई।

उस चीज़ को ठीक करने का कोई विचार?

Answer 1

स्क्रॉल कई बार आग लगती है और एक तत्व सेट करने की कोशिश कर रहा है style हमेशा & अनिवार्य रूप से कूदता है (यहां तक ​​कि मुश्किल से ध्यान देने योग्य लेकिन अभी भी जगी)।

सबसे अच्छा तरीका मैंने पाया करने के लिए

1. क्लोन हमारे तत्व,
2. मेकअप कि क्लोन क्लोन के visibility शैली के साथ fixed
3. खेल है।

शुद्ध जे एस:

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

तो जब आप "शीर्षक" ठीक देखते हैं, जो वास्तव में हमारे निश्चित क्लोन पर टॉप दिखाई हो रही है।