चार साल पहले, एरिक बिडलमैन ने एक बेहतरीन ब्लॉग पोस्ट लिखा था. इसमें उन्होंने बताया था कि position: sticky WebKit में शामिल हो गया है. उस समय, WebKit इंजन का इस्तेमाल Chrome के साथ-साथ Safari जैसे कई अन्य ब्राउज़र में भी किया जाता था. एक साल बाद, हमने Chrome से position:sticky को हटा दिया, क्योंकि "मौजूदा तौर पर इसे इस तरह से डिज़ाइन नहीं किया गया है कि यह स्क्रॉल करने और कॉम्पोज़ करने वाले मौजूदा सिस्टम के साथ अच्छी तरह से काम कर सके". इस वजह से, वेब डेवलपर को काफ़ी परेशानी हुई.
हम हमेशा से इसे Chrome में वापस लाना चाहते थे, क्योंकि गड़बड़ी के बारे में बताया गया था कि "स्क्रॉल करने और कॉम्पोज़ करने की सुविधा ठीक होने के बाद, हमें position:
sticky पर वापस जाना चाहिए और इस सुविधा को इस तरह से लागू करना चाहिए कि यह इंजन के बाकी हिस्सों के साथ अच्छी तरह से इंटिग्रेट हो जाए". लागू करने की प्रोसेस को ट्रैक करने वाले मेटा बग पर साल 2013 से काम किया जा रहा है.
अच्छी खबर यह है कि Chrome 56 (फ़िलहाल यह बीटा वर्शन है, जो दिसंबर 2016 में रिलीज़ हुआ था और जनवरी 2017 में स्टेबल वर्शन के तौर पर रिलीज़ होगा) में position: sticky सुविधा फिर से उपलब्ध है.
position:sticky क्या है?
मुझे यहां पहुंचने में थोड़ा समय लगा है, तो मैं इस बारे में उत्साहित क्यों हूं?
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, Firefox, और Safari पर उपलब्ध है. position:sticky के बारे में ज़्यादा जानकारी यहां दी गई है: