15 jQuery के प्लग स्मार्ट स्टिकी तत्वों को बनाने के लिए

जब आप साइट को ऊपर या नीचे स्क्रॉल करते हैं तो किसी स्थान पर तय किए गए कुछ तत्वों को देखना आम है। नेविगेशन मेनू, हेडर या साइडबार। यह उपयोगकर्ता की स्थिति की परवाह किए बिना तत्व को आसानी से उपलब्ध होने की अनुमति देता है.

एक चिपचिपा तत्व कहा जाता है, यह सिर्फ सीएसएस का उपयोग करके प्राप्त किया जा सकता है, हालांकि, इस पद्धति का उपयोग करके, प्रभाव कई ब्राउज़रों में विश्वसनीय नहीं है। यही कारण है कि हमने एक साथ JS पुस्तकालयों और jQuery प्लगइन्स को एक साथ रखा है जो आपको इस विशेष UX डिज़ाइन को बिना किसी परेशानी के प्राप्त करने की अनुमति देगा.

1. वेपाइंट्स

वेपॉइंट व्यूपोर्ट में तत्व स्थिति के आधार पर एक फ़ंक्शन को निष्पादित करने के लिए एक पुस्तकालय है। यह एक शॉर्टकट फ़ंक्शन के साथ आता है जो उस तत्व को बनाता है “चिपचिपा”. आप स्क्रॉलिंग दिशा को कस्टमाइज़ कर सकते हैं - ऊपर, नीचे, और भी सही तथा बाएं - तत्व जिसे व्यूपोर्ट के भीतर रहना चाहिए.

• निर्भरता: कोई नहीं / jQuery (वैकल्पिक)
• लाइसेंस: एमआईटी लाइसेंस

2. स्टिकी किट

साथ में StickyKit, न केवल आप व्यूपोर्ट के भीतर एक तत्व स्टिक बना सकते हैं, बल्कि आप उन्हें मूल तत्व के भीतर भी स्टिक बना सकते हैं, जिसे आप एक ही बार में कई तत्वों को निर्दिष्ट करते हैं। प्लगइन कुछ उन्नत सेटिंग्स के साथ भी आता है जिसमें कस्टम इवेंट्स और ट्रिगर शामिल हैं.

• निर्भरता: jQuery
• लाइसेंस: डब्ल्यूटीएफपीएल

3. स्टिकीज

StickyJS एक आसान उपयोग jQuery चिपचिपा प्लगइन है कि यह क्या कहता है। प्लगइन बॉक्स से बाहर काम करता है। फिर भी, यदि आपको कुछ अनुकूलन की आवश्यकता है, तो यह विकल्प / सेटिंग्स, कस्टम तरीके और घटनाक्रम के साथ आता है.

• निर्भरता: jQuery
• लाइसेंस: एमआईटी लाइसेंस

4. सिर

एक चिपचिपा साइट हेडर मूल्यवान ऊर्ध्वाधर स्थान लेगा जो मोबाइल पर साइट को देखने पर अंतर करता है. हेडरूम एक जावास्क्रिप्ट लाइब्रेरी है जो आपके चिपचिपे हेडर को स्मार्ट बनाएगी; उपयोगकर्ता द्वारा पृष्ठ को नीचे स्क्रॉल करने और स्क्रॉल करने पर दिखाई देने पर शीर्षलेख छिपाया जाएगा.

• निर्भरता: कोई नहीं / jQuery (वैकल्पिक) / कोणीय (वैकल्पिक)
• लाइसेंस: एमआईटी लाइसेंस

5. मेकफेडेडजेएस

Makefixed जब आप उपयोगकर्ता पृष्ठ को स्क्रॉल करते हैं, तो आप तत्वों को गतिशील रूप से तय कर सकते हैं। बस फोन करो makeFixed () उस तत्व पर कार्य करें जिसे आप निश्चित करना चाहते हैं। इसे कार्रवाई पर देखने के लिए डेमो देखें.

• निर्भरता: jQuery
• लाइसेंस: जी.पी.एल.

6. मिडनाइट जेएस

आधी रात आप दस्तावेज़ (DOM ट्री) के भीतर अपनी स्थिति के आधार पर कई हेडर / एलिमेंट्स को स्टिक करने और उनके बीच स्विच करने की अनुमति देते हैं, डेमो देखें कि मेरा क्या मतलब है। इसके अलावा, आप केवल जोड़कर मक्खी पर अपना रंग बदल सकते हैं डेटा-आधी रात निर्दिष्ट रंग नाम के साथ विशेषता.

• निर्भरता: jQuery
• लाइसेंस: एमआईटी लाइसेंस

7. स्क्रॉल

ScrollMagic पृष्ठ स्क्रॉल के दौरान सहभागिता जोड़ने के लिए उन्नत सुविधाएँ हैं। आप तत्वों को विशिष्ट स्क्रॉल स्थिति से पिन कर सकते हैं, स्क्रॉल स्थिति के आधार पर एनीमेशन जोड़ सकते हैं या यहां तक ​​कि एक भयानक लंबन प्रभाव बना सकते हैं। डेमो आपको कुछ जानकारी देता है कि यह प्लगइन क्या कर सकता है.

• निर्भरता: jQuery / वेलोसिटी.जेएस
• लाइसेंस: दोहरा लाइसेंस (MIT और GPL)

8. ऑनस्क्रीन

स्क्रीन पर वेपॉइंट्स के समान है - यह आपको फ़ंक्शन को निष्पादित करने की अनुमति देता है क्योंकि ब्राउज़र व्यूपोर्ट के भीतर तत्व प्रवेश कर रहा है, छोड़ रहा है, या कुछ पदों पर पहुंच रहा है।.

• निर्भरता: jQuery
• लाइसेंस: एमआईटी लाइसेंस

9. jQuery पिन

jQuery के पिन एक छोटा jQuery प्लगइन है “पिन” या “खोल देना” जब आप पृष्ठ स्क्रॉल करते हैं, तो एक स्थिति में तत्व। इस प्लगइन का मेरा सबसे पसंदीदा हिस्सा कुछ व्यूपोर्ट चौड़ाई में इसे निष्क्रिय करने का विकल्प है.

• निर्भरता: jQuery
• लाइसेंस: बीएसडी लाइसेंस

10. स्टिकी फ्लोट

स्टिकी फ्लोट हमें तत्वों को एक निश्चित स्थान देने की अनुमति देता है जो इसके माता-पिता के सापेक्ष है। आप दिए गए मापदंडों के साथ और मान बदलकर अपनी आवश्यकताओं के अनुसार चिपचिपा विकल्प सेट कर सकते हैं। यहाँ डेमो पकड़ो.

• निर्भरता: jQuery
• लाइसेंस: अपरिभाषित

11. ज़ेबरा पिन

ज़ेबरा पिन किसी भी तत्व पिन को उनके कंटेनर में बनाने के लिए एक हल्का प्लगइन है। इस प्लगइन के साथ आप जोड़ सकते हैं “चिपचिपा सत्ता” आपके नेविगेशन, साइडबार, हेडर और फ़ुटर, या अन्य तत्व जिन्हें आप दिखाई देना चाहते हैं, जब वे दिखाई देना चाहते हैं, तो आपके प्रोजेक्ट के तत्व। डेमो देखें.

• निर्भरता: jQuery
• लाइसेंस: जीपीएल लाइसेंस

12. एचसी-स्टिकी

साथ में कोर्ट-स्टिकी, आप चिपचिपे तत्व बना सकते हैं जो इसके कंटेनर को संदर्भित करते हैं, किसी भी दिए गए तत्व को, या स्वयं दस्तावेज़ को। इस प्लगइन में कुछ विकल्प हैं, जिन्हें आप अपनी ज़रूरत के अनुसार समायोजित कर सकते हैं, जैसे कि ऊपर और नीचे से दूरी शुरू करना और अन्य विकल्प.

• निर्भरता: jQuery
• लाइसेंस: एमआईटी लाइसेंस

13. चिपचिपा मोजो

चिपचिपा मोजो भयानक चिपचिपा तत्व बनाने के लिए एक हल्का, तेज और लचीला jQuery प्लगइन है। यह आधुनिक ब्राउज़रों के साथ संगत है और IE में इनायत से नीचा दिखाएगा.

• निर्भरता: jQuery
• लाइसेंस: एमआईटी लाइसेंस

14. चिपचिपा नवबर

यदि आप एकल पृष्ठ नेविगेशन बनाना चाहते हैं जो स्क्रॉल करते समय चिपक जाता है, तो यह लाइब्रेरी आपके लिए है.चिपचिपा नवबर ब्राउज़र विंडो के शीर्ष पर नेविगेशन को रखा जाएगा और अपने पेज पर संबंधित अनुभाग से कनेक्ट करने के लिए एंकर लिंक को हाइलाइट करें। नेविगेशन प्रभाव को सुशोभित करने के लिए आप Animate.css भी जोड़ सकते हैं.

• निर्भरता: jQuery
• लाइसेंस: एमआईटी लाइसेंस

15. स्टिकस्टैक

StickyStack जब उपयोगकर्ता तत्व को स्क्रॉल करते हैं और व्यूपोर्ट के शीर्ष पर पहुंचते हैं, तो तत्वों को दूसरे के साथ जोड़ देगा। इस लाइब्रेरी के साथ, आपका लंबा पृष्ठ स्टैक्ड कार्ड में बदल जाएगा.

• निर्भरता: jQuery
• लाइसेंस: अपरिभाषित