चार साल पहले एरिक बिडेलमैन ने एक बेहतरीन ब्लॉग पोस्ट बनाया और बताया कि position: sticky वेबकिट में उपलब्ध था. उस समय यह इंजन, Chrome और Safari जैसे कई अन्य ब्राउज़र पर काम करता था. एक साल बाद, वेब डेवलपर को परेशान करने के लिए, हमने position:sticky को Chrome से हटा दिया, क्योंकि "मौजूदा इंप्लिमेंटेशन, इस तरह से डिज़ाइन नहीं किया गया है कि वह मौजूदा स्क्रोलिंग और कंपोज़िटिंग सिस्टम के साथ अच्छी तरह इंटिग्रेट हो".
जैसा कि बग में बताया गया था, हम हमेशा से इसे Chrome में वापस लाना चाहते थे, "एक बार जब हमारे पास
स्क्रोल करने और कंपोज़िटिंग हाउस हो, तो हमें position:
sticky पर वापस आना चाहिए और सुविधा को इस तरह लागू करना चाहिए कि वह बाकी इंजन के साथ अच्छी तरह से इंटिग्रेट हो जाए". लागू करने को ट्रैक करने वाले मेटा बग पर 2013 से काम किया जा रहा है.
अच्छी खबर यह है कि Chrome 56 (वर्तमान में दिसंबर 2016 तक बीटा,
जनवरी 2017 में स्थिर) से position: sticky अब Chrome में वापस आ गया है.
पोज़िशन:स्टिकी क्या होता है?
यहां पहुंचने में बहुत समय लगता है, फिर भी मैं इसके लिए उत्साहित क्यों हूं?
position:sticky, सीएसएस पोज़िशनिंग एट्रिब्यूट है. इसकी मदद से, किसी एलिमेंट को व्यूपोर्ट में ठीक किया जा सकता है (यानी, उसे स्क्रीन पर सबसे ऊपर ऐंकर किया जा सकता है). हालांकि, ऐसा सिर्फ़ तब किया जा सकता है, जब इसका पैरंट एलिमेंट व्यूपोर्ट में दिख रहा हो और यह थ्रेशोल्ड वैल्यू के अंदर हो. जब इसे व्यूपोर्ट पर तय नहीं किया जाता, तो एलिमेंट position: relative की तरह काम करता है. यह प्लैटफ़ॉर्म में एक बहुत ही अच्छा और
आसान जोड़ है जो किसी एलिमेंट को व्यूपोर्ट के सबसे ऊपर लॉक करने के लिए ही
onscroll इवेंट हैंडलर में JavaScript का इस्तेमाल करने की ज़रूरत को हटा देता है.
मेरे ब्लॉग पर यह दिखता है. इससे मुझे मौजूदा सेक्शन के हेडर को स्क्रीन पर सबसे ऊपर रखने की सुविधा मिलती है. ऐसा तब होता है, जब आप लंबे और मुश्किल लेख पढ़ते हैं :\
इस सुविधा को लागू करने के लिए यह तय करें कि position एट्रिब्यूट की वैल्यू, उस एलिमेंट पर sticky होनी चाहिए जिसे आपको अटकना है.
इसके अलावा, ऑफ़सेट को वहां भी जोड़ा जा सकता है जहां इसे अटकना है.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
पिछले उदाहरण में, व्यूपोर्ट के ऊपर से <h3> एलिमेंट को 10 पिक्सल पर
ठीक किया जाएगा. इसे सीधे व्यूपोर्ट में सबसे ऊपर ठीक करने के लिए, आपको top एट्रिब्यूट को top: 0px के तौर पर सेट करना होगा.
इस सुविधा के लिए समर्थन काफ़ी मज़बूत है. यह Chrome (yay),
Firefox और Safari पर उपलब्ध है. यहां position:sticky के बारे में ज़्यादा जानकारी दी गई है: