Headroom.js के साथ एक ऑटो छुपा स्टिकी हैडर बनाएँ

ऑटो छिपाने वाले हेडर काफी समय से वेब डिजाइन में लगातार लोकप्रिय है। कई ब्लॉग और ऑनलाइन पत्रिकाएं चिपचिपे हेडर का उपयोग करती हैं उपयोगकर्ताओं को व्यस्त रखें तथा उन्हें नेविगेशन के लिए सीधी पहुँच प्रदान करें.

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

Headroom.js एक है नि: शुल्क वैनिला जावास्क्रिप्ट पुस्तकालय कोई निर्भरता या अत्यधिक एपीआई सुविधाओं के साथ। आप बस इसे अपने HTML में जोड़ते हैं, पेज हेडर को लक्षित करते हैं, और इसे चलने देते हैं.

हेडरूम बस कुछ सीएसएस वर्गों को जोड़ता है और हटाता है जो चेतन करते हैं के लिए हैडर को दिखाना / छिपाना गति का पता लगाने के लिए जावास्क्रिप्ट का उपयोग करना.

आप इस कार्यक्षमता को स्वयं बना सकते हैं लेकिन परेशान क्यों हैं? हेडरूम का परीक्षण और सभी प्रमुख ब्राउज़रों का समर्थन करता है. यहां तक ​​कि jQuery या Zepto के साथ अच्छा खेलता है यदि आपके पास अपनी साइट पर पहले से ही एक जेएस लाइब्रेरी स्थापित है.

तुम्हे पता चलेगा कोड नमूने के बहुत सारे GitHub रेपो में, लेकिन यहाँ है सरल उदाहरण है यह लक्ष्य है #header तत्व:

 var myElement = document.querySelector ("# हैडर"); // # हेडर तत्व var हेडरूम = नए हेडरूम (myElement) में पास होने वाली हेडरूम ऑब्जेक्ट बनाएं; // लाइब्रेरी हेडरूम को प्रारंभ करें। यह (); 

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

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