बूटस्ट्रैप एफ़िक्स प्लगइन (उन्नत)

प्रत्यय प्लगइन

Affix प्लगइन एक तत्व को पृष्ठ पर एक क्षेत्र में चिपका (लॉक) होने की अनुमति देता है। इसका उपयोग अक्सर नेविगेशन मेनू या सामाजिक आइकन बटन के साथ किया जाता है, ताकि पृष्ठ को ऊपर और नीचे स्क्रॉल करते समय उन्हें एक विशिष्ट क्षेत्र में "छड़ी" बनाया जा सके।

प्लगइन स्क्रॉल स्थिति के आधार पर इस व्यवहार को चालू और बंद करता है ( CSS positionसे का मान बदलता staticहै )।fixed

उदाहरण 1) एक चिपका हुआ नावबार:

उदाहरण 2) एक चिपका हुआ साइडबार:

Affix के साथ, जब हम पेज को ऊपर और नीचे स्क्रॉल करते हैं, तो मेनू हमेशा दिखाई देता है और अपनी स्थिति में लॉक होता है।

एक निश्चित नेविगेशन मेनू कैसे बनाएं

निम्न उदाहरण दिखाता है कि क्षैतिज चिपका हुआ नेविगेशन मेनू कैसे बनाया जाता है:

निम्न उदाहरण दिखाता है कि लंबवत चिपका हुआ नेविगेशन मेनू कैसे बनाया जाता है:

उदाहरण समझाया गया

data-spy="affix"उस तत्व में जोड़ें जिसे आप चिपकाना चाहते हैं।

वैकल्पिक data-offset-top|bottomरूप से, स्क्रॉल की स्थिति की गणना करने के लिए विशेषता जोड़ें।

यह काम किस प्रकार करता है

affix प्लगइन तीन वर्गों के बीच टॉगल करता है: .affix, .affix-top, और .affix-bottom। प्रत्येक वर्ग एक विशेष राज्य का प्रतिनिधित्व करता है। कक्षा position:fixed के अपवाद के साथ, वास्तविक स्थिति को संभालने के लिए आपको सीएसएस गुण जोड़ना होगा ।.affix

• .affix-topप्लगइन यह इंगित करने के लिए या वर्ग जोड़ता .affix-bottomहै कि तत्व अपने सबसे ऊपर या सबसे नीचे की स्थिति में है। इस बिंदु पर CSS के साथ पोजिशनिंग की आवश्यकता नहीं है।


• चिपकाए गए तत्व के पीछे स्क्रॉल करने से वास्तविक एफ़िक्सिंग चालू हो जाता है - यह वह जगह है जहाँ प्लगइन .affix-topया .affix-bottomवर्ग को .affixवर्ग (सेट position:fixed) से बदल देता है। इस बिंदु पर, आपको पृष्ठ में चिपकाए गए तत्व की स्थिति के लिए CSS topया गुण जोड़ना होगा।bottom


• यदि एक निचला ऑफ़सेट परिभाषित किया गया है, तो पिछले स्क्रॉल करने से यह .affixवर्ग को .affix-bottom. चूंकि ऑफ़सेट वैकल्पिक हैं, इसलिए किसी एक को सेट करने के लिए आपको उपयुक्त सीएसएस सेट करना होगा। इस मामले में, position:absoluteजब आवश्यक हो तो जोड़ें।

ऊपर के पहले उदाहरण में, एफ़िक्स प्लगइन .affixवर्ग (स्थिति: निश्चित) को <nav> तत्व में जोड़ता है जब हम ऊपर से 197 पिक्सेल स्क्रॉल करते हैं। यदि आप उदाहरण खोलते हैं, तो आप यह भी देखेंगे कि हमने सीएसएस topसंपत्ति को 0 के मान के साथ .affixकक्षा में जोड़ा है। यह सुनिश्चित करने के लिए है कि जब हम ऊपर से 197 पिक्सेल स्क्रॉल कर चुके हों, तो नेवबार हर समय पृष्ठ के शीर्ष पर रहता है।

स्क्रॉलस्पी और एफिक्स

स्क्रॉलस्पाई प्लगइन के साथ एफिक्स प्लगइन का उपयोग करना :

पूर्ण बूटस्ट्रैप एफ़िक्स संदर्भ

सभी प्रत्यय विधियों और घटनाओं के पूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप जेएस एफिक्स संदर्भ पर जाएं ।