position: sticky, एलिमेंट की पोज़िशन तय करने का एक नया तरीका है. यह सैद्धांतिक तौर पर position: fixed जैसा है. इसमें अंतर यह है कि position: sticky के साथ कोई एलिमेंट, अपने पैरंट में position: relative की तरह तब तक काम करता है, जब तक व्यूपोर्ट में ऑफ़सेट के दिए गए थ्रेशोल्ड के पूरा नहीं हो जाता.
इस्तेमाल के उदाहरण
इस सुविधा के बारे में एडवर्ड ओ'कॉनर के मूल प्रस्ताव से पैराफ़्रेज़िंग:
पेश है स्टिकी पोज़िशनिंग की सुविधा
बस position: sticky (वेंडर से पहले जोड़ा गया) जोड़कर, हम किसी एलिमेंट को position: relative तब तक बता सकते हैं, जब तक कि उपयोगकर्ता आइटम (या उसके पैरंट) को सबसे ऊपर से 15 पिक्सल तक स्क्रोल न कर दे:
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 15px;
}
top: 15px पर, एलिमेंट ठीक हो जाता है.
इस सुविधा को व्यावहारिक तौर पर समझने के लिए, मैंने एक डेमो बनाई है, जिसमें स्क्रोल करते समय ब्लॉग के शीर्षक चिपक जाते हैं.
पुराना तरीका: इवेंट स्क्रोल करें
अब तक, स्टिकी इफ़ेक्ट इस्तेमाल करने के लिए साइटें, JS में scroll इवेंट लिसनर सेट अप करती हैं. असल में, हम इस तकनीक के साथ-साथ html5rocks ट्यूटोरियल पर भी इस्तेमाल करते हैं. 1200 पिक्सल से छोटी स्क्रीन पर, एक तय संख्या तक स्क्रोल करने के बाद हमारी विषय सूची का साइडबार position: fixed में बदल जाता है.
यहां हेडर के लिए (अब यह पुराना तरीका है) दिया गया है. यह हेडर, उपयोगकर्ता के नीचे की ओर स्क्रोल करने पर, व्यूपोर्ट के सबसे ऊपर दिखता है और जब उपयोगकर्ता ऊपर की ओर स्क्रोल करता है, तब वह अपनी जगह पर वापस आ जाता है:
<div class="header"></div>
<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? header.classList.add('sticky') :
header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
</script>
इसे आज़माएं: http://output.jsbin.com/omanut/2/
यह काफ़ी आसान है, लेकिन अगर आपको कई DOM नोड के लिए ऐसा करना है, तो यह मॉडल तुरंत टूट जाएगा. उदाहरण के लिए, जब उपयोगकर्ता स्क्रोल करता है, तब ब्लॉग का हर <h1> टाइटल.
JS बेहतर क्यों नहीं है
आम तौर पर, स्क्रोल हैंडलर का इस्तेमाल करना कभी अच्छा नहीं होता. लोगों को बहुत ज़्यादा काम करना होता है और वे यह सोचते हैं कि उनका यूज़र इंटरफ़ेस (यूआई) क्यों अजीब है.
ध्यान देने वाली बात यह है कि ज़्यादातर ब्राउज़र, परफ़ॉर्मेंस को बेहतर बनाने के लिए हार्डवेयर की तेज़ी से स्क्रोल करने की सुविधा लागू कर रहे हैं. इसमें समस्या यह है कि JS स्क्रोल हैंडलर चल रहे हैं. इस वजह से, ब्राउज़र शायद धीमे (सॉफ़्टवेयर) मोड में चले जाएं. अब हम जीपीयू पर काम नहीं कर रहे हैं. इसके बजाय, हम सीपीयू पर वापस आ गए हैं. इसका परिणाम? आपका पेज स्क्रोल करते समय उपयोगकर्ता को ज़्यादा जैंक महसूस होते हैं.
इसलिए, इस तरह की सुविधा का सीएसएस में एलान किया जाना सही रहता है.
सहायता
माफ़ करें, इसके लिए कोई स्पेसिफ़िकेशन नहीं है. इसे जून में www-style पर सुझाया गया था और अभी-अभी WebKit में भेजा गया था. इसका मतलब है कि जानकारी देने के लिए कोई अच्छा दस्तावेज़ नहीं है. हालांकि, ध्यान दें कि इस गड़बड़ी के मुताबिक, अगर left और right दोनों तय किए जाते हैं, तो left जीत जाता है. इसी तरह, अगर top और bottom को एक साथ इस्तेमाल किया जाता है, तो top जीतता है.
फ़िलहाल, Chrome 23.0.1247.0+ (मौजूदा कैनरी) और WebKit के साथ हर रात उपलब्ध होने वाला वर्शन उपलब्ध है.