सीएसएस स्थिति के लिए एक और घटना: चिपचिपा

क्या आपने कभी सोचा है कि जब positions: sticky साथ तत्वों को कैसे ट्रैक किया जाए positions: sticky तय हो गया? एरिक बिडेलमैन का इस विषय पर एक अद्भुत पोस्ट है , इसे अभी पढ़ें और पढ़ें।

मैंने अपने प्रोजेक्ट में इसका उपयोग करते समय कुछ कठिनाइयां पाई हैं। यहाँ वे हैं:

1. इससे अतिक्रमण टूटता है। sticky-change घटना हेडर तत्व से संबंधित है, लेकिन आपको हेडर के माता-पिता को सेंटिनल्स सम्मिलित करना होगा (और इसे position: relative बनाना)।
2. इसमें बहुत सारे कारक शामिल हैं जो सुसंगत होना चाहिए और उनका कनेक्शन हमेशा स्पष्ट नहीं होता है। उदाहरण के लिए, आप सेट नहीं कर सकते हैं --default-padding अधिक --default-padding , जो शीर्ष-प्रहरी की ऊंचाई है।
3. आप एक लेख के बीच में ब्लॉक को ट्रैक नहीं कर सकते।

आइए इसे सुधारने की कोशिश करें!

उन सभी मुद्दों को एक ही समस्या को दर्शाते हैं: एरिक का समाधान स्टिकी के माता-पिता की स्थिति पर नज़र रखने के बारे में है, न कि चिपचिपा ब्लॉक। मूल विचार रखते हुए इसमें सुधार करें। कैसे? हम प्रहरी को हेडर में जोड़ेंगे और कंटेनर के साथ उनके चौराहे का निरीक्षण करेंगे।

यहाँ यह कैसे करना है:

1. आपको प्रत्येक चिपचिपा पक्ष के लिए एक प्रहरी की आवश्यकता है जिसे आप देखना चाहते हैं।
2. पहले प्रहरी top संपत्ति सेट करें top बराबर लेकिन रिवर्स साइन माइनस 1 के साथ। उदाहरण के लिए यदि आपके हेडर में top: 10px -11px , तो प्रहरी हेडर को -11px सेट करें। आप top: calc(-1px + -1 * var( -- header-sticky-top)) जैसे कुछ का उपयोग कर सकते हैं top: calc(-1px + -1 * var( -- header-sticky-top)) या यदि आप शीर्ष शीर्ष शून्य के बराबर है तो बस -1px सेट करें।
3. यदि आवश्यक हो तो अन्य प्रहरी जोड़ें।
4. कंटेनर के साथ प्रहरी चौराहे का निरीक्षण करें।
5. आप कह सकते हैं कि हैडर अटक गया है, अगर सेंटिनल चौराहा रिकॉर्ड में है। isIntersecting = true , intersectionRatio = 0 , और intersectionRect.top = rootBounds.top
6. अन्य पक्ष, बस ऊपर के बजाय नीचे, बाएं या दाएं देखते हैं।
7. visibility: hidden जोड़ना न भूलें visibility: hidden और pointer-events: none प्रहरी तक pointer-events: none ।

यहाँ डेमो और स्रोतों की जाँच करें