अपनी लैंडिंग पर कायम रहें! स्थिति - WebKit में स्टिकी लैंड

Eric Bidelman

position: sticky, एलिमेंट को पोज़िशन करने का एक नया तरीका है. यह position: fixed से मिलता-जुलता है. अंतर यह है कि position: sticky वाला एलिमेंट, अपने पैरंट में position: relative की तरह तब तक काम करता है, जब तक व्यूपोर्ट में तय ऑफ़सेट थ्रेशोल्ड पूरा नहीं हो जाता.

उपयोग के उदाहरण

इस सुविधा के लिए, एडवर्ड ओ'कॉनर के मूल प्रपोज़ल के बारे में बताते हुए:

ध्यान दें: कई वेबसाइटों में ऐसे एलिमेंट होते हैं जो उपयोगकर्ता की स्क्रोल पोज़िशन के आधार पर, इन-फ़्लो और position: fixed के बीच वैकल्पिक रूप से बदलते रहते हैं. आम तौर पर, ऐसा साइडबार में मौजूद उन एलिमेंट के लिए किया जाता है जिन्हें पेज का लेखक चाहता है कि वे उपयोगकर्ता के स्क्रोल करने पर हमेशा दिखें. हालांकि, स्क्रोल करने पर वे पेज पर किसी जगह पर स्लॉट हो जाते हैं. news.google.com ("मुख्य खबरें" साइडबार) और yelp.com (खोज के नतीजों का मैप) अच्छे उदाहरण हैं.

पेश है स्टिकी पोज़िशनिंग

डेमो लॉन्च करना

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/

यह आसान है, लेकिन अगर आपको कई डीओएम नोड के लिए ऐसा करना है, तो यह मॉडल काम नहीं करता. उदाहरण के लिए, जब उपयोगकर्ता किसी ब्लॉग को स्क्रोल करता है, तो उसके हर <h1> टाइटल के लिए.

JS का इस्तेमाल क्यों नहीं करना चाहिए

आम तौर पर, स्क्रोल हैंडलर का इस्तेमाल करना अच्छा नहीं होता. लोग बहुत ज़्यादा काम करते हैं और उन्हें आश्चर्य होता है कि उनका यूज़र इंटरफ़ेस (यूआई) खराब क्यों है.

एक और बात ध्यान देने वाली है कि ज़्यादा से ज़्यादा ब्राउज़र, परफ़ॉर्मेंस को बेहतर बनाने के लिए हार्डवेयर की मदद से स्क्रोल करने की सुविधा लागू कर रहे हैं. इसकी समस्या यह है कि JS स्क्रोल हैंडलर के चालू होने पर, ब्राउज़र धीमे (सॉफ़्टवेयर) मोड में वापस आ सकते हैं. अब हम जीपीयू पर नहीं चल रहे हैं. इसके बजाय, हम सीपीयू पर वापस आ गए हैं. परिणाम? आपके पेज को स्क्रोल करते समय, उपयोगकर्ता को ज़्यादा झटका लगता है.

इसलिए, सीएसएस में इस तरह की सुविधा को एलान करने वाली सुविधा के तौर पर शामिल करना काफ़ी सही है.

सहायता

माफ़ करें, इसके लिए कोई खास जानकारी नहीं है. इस सुविधा का www-style पर सुझाव जून में दिया गया था. यह सुविधा अभी-अभी WebKit में लॉन्च हुई है. इसका मतलब है कि कोई अच्छा दस्तावेज़ नहीं है. हालांकि, एक बात ध्यान रखें कि इस गड़बड़ी के मुताबिक, अगर left और right, दोनों एट्रिब्यूट की वैल्यू दी गई है, तो left को प्राथमिकता दी जाएगी. इसी तरह, अगर top और bottom का एक साथ इस्तेमाल किया जाता है, तो top का इस्तेमाल किया जाता है.

फ़िलहाल, यह सुविधा Chrome 23.0.1247.0+ (मौजूदा कैनरी) और WebKit के नाइटली वर्शन के साथ काम करती है.