प्रलेखन को समझना बहुत मुश्किल था क्योंकि मैं सीएसएस के लिए नया हूं। तो क्या कोई भी स्थिति के बीच वास्तविक अंतर की व्याख्या कर सकता है: चिपचिपा और स्थिति: तय? मैं एक उदाहरण की भी सराहना करता हूं।स्थिति के बीच अंतर: चिपचिपा और स्थिति: तय?
मैंने https://developer.mozilla.org/en-US/docs/Web/CSS/position और कुछ अन्य लेखों के माध्यम से पढ़ा, लेकिन मुझे अभी भी यह नहीं मिला है।
position: fixed हमेशा अपने स्क्रॉलिंग कंटेनर या व्यूपोर्ट के भीतर किसी तत्व को किसी तत्व को ठीक करता है। कोई फर्क नहीं पड़ता कि आप इसके कंटेनर को कैसे स्क्रॉल करते हैं, यह एक ही स्थिति में रहेगा और कंटेनर के भीतर अन्य तत्वों के प्रवाह को प्रभावित नहीं करेगा।
विशिष्ट विवरण में जाने के बिना, position: sticky मूल रूप से position: relative तरह काम करता है जब तक एक तत्व एक विशिष्ट ऑफसेट, जिस स्थिति में यह position: fixed में बदल जाता है परे स्क्रॉल किया जाता है, तत्व अपनी स्थिति के लिए "छड़ी" के बजाय दृश्य से बाहर स्क्रॉल किया जा रहा है के कारण । यह अंततः अनावृत हो जाता है क्योंकि यह अपनी मूल स्थिति की तरफ वापस स्क्रॉल हो जाता है। कम से कम, मैं सिद्धांत में इसे समझता हूं।
कारण मैं विवरण में जाने से बचना चाहता हूं क्योंकि position: sticky ब्रांड नया, प्रयोगात्मक (जैसा कि आप लिंक करते हैं उस दस्तावेज़ में दिखाया गया है) है, और अभी तक अंतिम रूप दिया गया है। यहां तक कि मैंने ऊपर जो कहा है वह भी निकट भविष्य में बदल सकता है। आप अभी तक position: sticky का उपयोग करने में सक्षम नहीं होंगे (उम्मीद है कि यह अगले वर्ष के भीतर बदल जाएगा)।
मोज़िला ने हाल ही में position: stickyhere के कार्यान्वयन को प्रस्तुत किया। यह एक घड़ी के लायक है।
मैं स्थिति का उपयोग कर रहा हूं: चिपचिपा, और सबसे पहले यह ठीक काम करता है ... रिश्तेदार उपस्थिति से तय करने के लिए चला जाता है। लेकिन एक लंबे पृष्ठ पर, आखिरकार जब मैं काफी देर तक स्क्रॉल करता हूं, चिपचिपा हेडर अन्य पेज ऑब्जेक्ट्स की तरह गायब हो जाता है। – MarsAndBack
चिपचिपा बहुत अच्छा और आसान लग रहा है। उम्मीद है कि यह जल्द ही सभी ब्राउज़रों के लिए लागू किया जाएगा। मैंने कुछ प्रभावों में यह प्रभाव देखा है लेकिन जावास्क्रिप्ट के साथ बनाया गया है। चिपचिपापन के साथ यह कोड और जटिलता की मात्रा को कम कर सकता है। – Babulaas
निश्चित स्थिति:
निश्चित स्थिति के साथ एक तत्व व्यूपोर्ट या ब्राउज़र विंडो खुद के संबंध में प्रदर्शित किया जाता है। पृष्ठ हमेशा स्क्रॉल होने पर भी यह एक ही स्थान पर रहता है।
यह पृष्ठ में अन्य तत्वों के प्रवाह को प्रभावित नहीं करता है यानी किसी भी विशिष्ट स्थान पर कब्जा नहीं करता है (जैसे position: absolute)।
यदि यह किसी अन्य कंटेनर (सापेक्ष/पूर्ण स्थिति के साथ या बिना) के अंदर परिभाषित किया गया है, फिर भी यह ब्राउज़र के संबंध में स्थित है और उस कंटेनर के साथ नहीं है। (यहां यह position: absolute से अलग है)।
स्टिकी स्थिति:
चिपचिपा स्थिति के साथ एक तत्व उपयोगकर्ता की पुस्तक स्थिति के आधार पर स्थिति में है। @Boltclock के रूप में यह मूल रूप से स्थिति की तरह कार्य करता है: सापेक्ष जब तक किसी तत्व को किसी विशिष्ट ऑफ़सेट से परे स्क्रॉल नहीं किया जाता है, इस स्थिति में यह स्थिति में बदल जाता है: निश्चित। जब इसे वापस स्क्रॉल किया जाता है तो यह अपनी पिछली (सापेक्ष) स्थिति पर वापस आ जाता है।
यह पृष्ठ में अन्य तत्वों के प्रवाह को प्रभावित करता है यानी पृष्ठ पर एक विशिष्ट स्थान पर कब्जा करता है (जैसे position: relative)।
यदि यह कुछ कंटेनर के अंदर परिभाषित किया गया है, तो यह उस कंटेनर के संबंध में स्थित है। यदि कंटेनर में कुछ ओवरफ़्लो (स्क्रॉल) है, तो स्क्रॉल ऑफ़सेट के आधार पर यह स्थिति में बदल जाता है: निश्चित।
तो यदि आप निश्चित कार्यक्षमता प्राप्त करना चाहते हैं लेकिन एक कंटेनर के अंदर चिपचिपा उपयोग करें।
बेहतर स्पष्टता के लिए इस आत्म-व्याख्यात्मक उदाहरण को देखें। https://codepen.io/nyctophiliac/pen/xpmpyp
हालांकि 'स्थिति: चिपचिपा' जैसी कोई चीज़ नहीं है। http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/ –
@Paulie_D चिपचिपा (प्रायोगिक) –