स्क्रॉल पर एनिमेट करने वाला सरल स्टिकी/फिक्स्ड हेडर

स्टिकी हेडर वे हेडर होते हैं जो वेबसाइट के शीर्ष पर स्थिर रहते हैं, और नीचे स्क्रॉल करने पर भी दिखाई देते हैं।

हालांकि वे जटिल लग सकते हैं, आप वास्तव में कुछ सीएसएस और जावास्क्रिप्ट का उपयोग करके स्वयं को बना सकते हैं।

यह ट्यूटोरियल कवर करेगा:

1. HTML और CSS का उपयोग करके स्टिकी हेडर कैसे बनाएं, और
2. नीचे स्क्रॉल करते समय हेडर को एनिमेट करने के लिए जावास्क्रिप्ट और सीएसएस ट्रांज़िशन का उपयोग कैसे करें।

आइए शुरू करें!

आरंभ करने के लिए, हमारे पास निम्नलिखित फाइलों के साथ एक सरल वेबसाइट प्रोजेक्ट है:

• Style.css
• Script.js
• हेडर के लिए लोगो इमेज

यहाँ वेबसाइट कैसी दिखती है:

आइए अब कोड में आते हैं और अपने हेडर को स्टिकी बनाना शुरू करते हैं!

चरण 1:हेडर को चिपचिपा बनाने के लिए CSS का उपयोग करें

हमारी index.html फ़ाइल में, हेडर के लिए मार्कअप इस तरह दिखता है:

<header>
    <img class="logo" src="logo-codeco.png" width="40" height="40" />
    <nav>
        <a class="nav__link" href="#">About</a>
        <a class="nav__link" href="#">Work</a>
        <a class="nav__link" href="#">Contact</a>
    </nav>
</header>

यह केवल एक नियमित शीर्षलेख है, इसलिए यदि आप पृष्ठ को नीचे स्क्रॉल करते हैं, तो शीर्षलेख ऊपर और बाहर स्क्रॉल करेगा।

हेडर को चिपचिपा बनाएं

हेडर को स्टिकी बनाने के लिए, हमें हेडर एलिमेंट में कुछ CSS कोड जोड़ने होंगे:

header {
    position: fixed;
    top: 0px;
    ...
    (other styles here)
}

स्थिति:निश्चित CSS घोषणा आपको शीर्षलेख को दृश्य पृष्ठ के किसी भी भाग में ठीक करने की अनुमति देती है।

फिर शीर्ष:0px घोषणा शीर्षलेख को पृष्ठ के शीर्ष से, यानी सबसे ऊपर से शून्य पिक्सेल के रूप में सेट करती है।

एक नोट:स्थिति सेट करना संपत्ति निश्चित शीर्षलेख तत्व स्थिति:पूर्ण . के समान व्यवहार करेगा , जो तत्व को पृष्ठ के सामान्य "प्रवाह" से बाहर ले जाता है।

इसका मतलब है कि आपको तत्व के लिए पूरे पृष्ठ पर जाने के लिए मैन्युअल रूप से चौड़ाई निर्धारित करनी होगी। हमें चौड़ाई:100% . भी सेट करना था हेडर के लिए जिस तरह से हम चाहते थे उसे प्रदर्शित करने के लिए।

अब यदि हम पृष्ठ को पुनः लोड करते हैं और नीचे स्क्रॉल करने का प्रयास करते हैं, तो हम देख सकते हैं कि शीर्ष लेख पृष्ठ पर और शीर्ष पर, हर समय बना रहता है। बढ़िया!

पृष्ठ पर मुख्य सामग्री में शीर्षलेख के लिए स्थान जोड़ें

हालांकि, हेडर उस सामान्य पृष्ठ प्रवाह से बाहर होने के कारण आप एक समस्या देख सकते हैं, जहां तत्व एक दूसरे के नीचे ढेर हो जाते हैं।

बाकी सामग्री ऐसा व्यवहार करती है जैसे कि हेडर वहां भी नहीं है, और हेडर के नीचे आंशिक रूप से छिपा हो जाता है:

इसे ठीक करने के लिए, हमें मुख्य सामग्री को नीचे धकेलना होगा ताकि वह हेडर के नीचे स्थित हो (लेकिन उसके नीचे नहीं)। चूंकि हेडर 80px लंबा है, हम 80px की मुख्य सामग्री में एक शीर्ष मार्जिन जोड़ सकते हैं:

section.content {
    margin-top: 80px;
    ...
    (other styles here)
}

पृष्ठ को पुनः लोड करने के बाद, हम देख सकते हैं कि सामग्री अब शीर्षलेख के बाद अच्छी तरह से प्रदर्शित होती है।

अब हमने CSS का उपयोग करके अपने हेडर को स्टिकी बना दिया है!

चरण 2:स्क्रॉल करते समय हेडर को एनिमेट करने के लिए JavaScript और CSS ट्रांज़िशन का उपयोग करें

अपने अगले कदम के लिए, हम इसे थोड़ा फैंसी बना देंगे।

जब आप एक सहज एनिमेशन प्रभाव का उपयोग करके पृष्ठ को नीचे स्क्रॉल करते हैं, तो हम हेडर की ऊंचाई को छोटा करना चाहते हैं।

इससे पहले कि हम इस भाग को कोड करना शुरू करें, आइए हम जो कुछ भी करना चाहते हैं उसे अलग-अलग चरणों में तोड़ दें:

1. जावास्क्रिप्ट का उपयोग यह पता लगाने के लिए करें कि उपयोगकर्ता ने पृष्ठ के नीचे एक निश्चित दूरी को कब स्क्रॉल किया है।
2. शीर्षलेख तत्व में एक नया CSS वर्ग जोड़ने के लिए JavaScript का पुन:उपयोग करें।
3. सीएसएस में, हेडर की ऊंचाई कम करने के लिए इस नए वर्ग के लिए शैलियाँ जोड़ें।
4. डिफ़ॉल्ट हेडर के लिए सीएसएस में, एक सीएसएस ट्रांज़िशन जोड़ें ताकि एनिमेटेड प्रभाव के साथ ऊंचाई बदल जाए।

जावास्क्रिप्ट का उपयोग यह पता लगाने के लिए करें कि उपयोगकर्ता ने पृष्ठ के नीचे एक निश्चित दूरी को कब स्क्रॉल किया है।

हमारी script.js फ़ाइल में, हम हर बार उपयोगकर्ता द्वारा पृष्ठ को ऊपर या नीचे स्क्रॉल करने पर पता लगाना चाहते हैं। ऐसा करने के लिए, हम किसी भी स्क्रॉल का पता लगाने के लिए एक ईवेंट श्रोता जोड़ेंगे। यह इस तरह दिखता है:

// Run the checkHeader function every time you scroll
window.addEventListener('scroll', checkHeader);

स्क्रॉल करते समय यह कोड checkHeader फ़ंक्शन चलाएगा।

स्क्रॉल करते समय फ़ंक्शन बनाएं और थ्रॉटल करें

हालांकि, स्क्रॉल इवेंट पर चल रहे फ़ंक्शन संभावित रूप से आपकी वेबसाइट को धीमा कर सकते हैं। ऐसा इसलिए है क्योंकि हर बार जब आप अपने माउस व्हील को स्वाइप या स्पिन करते हैं तो स्क्रॉल इवेंट 15 बार या उससे अधिक बार सक्रिय होता है। यदि आपके स्क्रॉल फ़ंक्शन में बहुत सारे कोड हैं, तो वे सभी ईवेंट जोड़ सकते हैं और अंततः आपकी वेबसाइट को धीमा कर सकते हैं।

इस समस्या को हल करने के लिए, आप अपने स्क्रॉल इवेंट फ़ंक्शन में थ्रॉटल फ़ंक्शन जोड़ सकते हैं। यह आपको सीमित करने, या थ्रॉटल करने की अनुमति देगा कि फ़ंक्शन कितनी बार ट्रिगर होता है।

मैंने लोडाश जावास्क्रिप्ट लाइब्रेरी से एक थ्रॉटल फ़ंक्शन का उपयोग किया है ताकि हर 300ms में केवल एक बार चेकहेडर फ़ंक्शन को सक्रिय किया जा सके:

// This function will run a throttled script every 300 ms
var checkHeader = _.throttle(() => { 
    // Run JavaScript stuff here
}, 300);

अब जब हमने अपना फंक्शन सेट कर लिया है, तो चलिए और अधिक JavaScript जोड़ते हैं जिसे हम checkHeader में चलाएंगे।

स्क्रॉल स्थिति जांचें

इसके बाद, हम स्क्रॉलपोजिशन नामक एक वेरिएबल बनाकर यह जांच करेंगे कि उपयोगकर्ता ने पृष्ठ को कितनी दूर तक स्क्रॉल किया है:

// Detect scroll position
let scrollPosition = Math.round(window.scrollY);

window.scrollY मान आपको बताएगा कि उपयोगकर्ता को ऊपर से कितने पिक्सेल स्क्रॉल किए गए हैं। अगर वे सबसे ऊपर हैं, तो यह 0 होगा। वे जितना नीचे स्क्रॉल करेंगे, संख्या उतनी ही बड़ी होगी।

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

स्क्रॉल स्थिति के आधार पर CSS वर्ग जोड़ें या निकालें

अब, हम यह देखने के लिए एक IF स्टेटमेंट बनाएंगे कि क्या उपयोगकर्ता ने 100px नीचे स्क्रॉल किया है (हेडर से थोड़ा आगे, जो कि 80px लंबा है)।

यदि उन्होंने 100 पिक्सेल से अधिक स्क्रॉल किया है, तो हम हेडर में "स्टिकी" नामक एक सीएसएस वर्ग जोड़ देंगे। अगर वे 100px से ऊपर हैं, तो हम CSS क्लास को हटा देंगे।

उसके लिए यह कोड है:

// If we've scrolled 100px, add "sticky" class to the header
if (scrollPosition > 100){
    document.querySelector('header').classList.add('sticky');
}
// If not, remove "sticky" class from header
else {
    document.querySelector('header').classList.remove('sticky');
}

उपरोक्त कोड पर कुछ नोट्स:document.querySelector तत्व खोजने का एक आसान तरीका है, और classList.add और classList.remove आप तत्वों से CSS कक्षाओं को कैसे जोड़ या हटा सकते हैं।

और यही वह जावास्क्रिप्ट है जिसकी हमें इस परियोजना के लिए आवश्यकता है!

आइए अधिक CSS पर चलते हैं…

सीएसएस में, हेडर की ऊंचाई को कम करने के लिए इस नए वर्ग के लिए शैलियाँ जोड़ें।

अब जब हमने वह नया "स्टिकी" वर्ग जोड़ लिया है, तो हमें इसके लिए शैलियों को बनाने की आवश्यकता है।

यह निर्धारित करने के लिए कि हेडर की ऊंचाई कितनी कम करनी है, आइए क्रोम में इंस्पेक्टर को देखें:

हेडर की ऊंचाई 40px है, और प्रत्येक तरफ 20px की पैडिंग है (ऊपर, दाएं, नीचे, बाएं)। लोगो की छवि स्वयं 40px है, इसलिए हम स्वयं ऊंचाई कम नहीं करना चाहते हैं।

इसके बजाय, हम ऊपर और नीचे की पैडिंग को 20px से घटाकर 10px कर सकते हैं।

ऐसा करने के लिए, हम हेडर एलिमेंट के लिए "स्टिकी" क्लास के साथ, कम पैडिंग के साथ CSS स्टाइल्स का एक नया सेट बनाएंगे:

header.sticky {
    padding: 10px 20px;
}

तो जब जावास्क्रिप्ट के माध्यम से "चिपचिपा" वर्ग जोड़ा जाता है, तो हेडर ऊंचाई में 60px तक कम हो जाएगा। फिर जब CSS क्लास को हटा दिया जाता है, तो हेडर अपनी मूल ऊंचाई 80px पर वापस चला जाएगा।

अब अंतिम चरण पर चलते हैं, और इस ऊंचाई परिवर्तन को चेतन करते हैं।

सीएसएस ट्रांज़िशन जोड़ें ताकि एनिमेटेड प्रभाव के साथ ऊंचाई बदल जाए।

अब तक हमने जितने भी कोड जोड़े हैं, स्टिकी हेडर कार्यात्मक रूप से काम करेगा। पेज को नीचे स्क्रॉल करने से हेडर की ऊंचाई कम हो जाएगी। हालांकि यह तुरंत 80px से 60px की ऊंचाई पर कूद जाएगा, जो उपयोगकर्ता को झकझोर देने वाला लगेगा।

CSS ट्रांज़िशन में जोड़ने से ऊंचाई में धीरे-धीरे बदलाव आएगा, और उपयोगकर्ता को और अधिक प्रसन्नता होगी।

इसे जोड़ने के लिए, हम CSS में डिफ़ॉल्ट हेडर एलिमेंट में एक ट्रांज़िशन प्रॉपर्टी जोड़ेंगे ("स्टिकी" क्लास वाला हेडर नहीं)। यह सुनिश्चित करेगा कि हेडर में वह "चिपचिपा" वर्ग है या नहीं, ऊंचाई परिवर्तन हमेशा सुचारू रहेगा।

यहाँ उस जोड़ के लिए CSS है:

header {
    (other styles here)
    ...
    transition: padding 300ms ease;
}

ट्रांज़िशन प्रॉपर्टी कुछ पैरामीटर ले सकती है:

• पहला पैरामीटर यह है कि यह संक्रमण किस संपत्ति को प्रभावित करेगा। चूंकि हम पैडिंग बदल रहे हैं, हम यहां "पैडिंग" डालेंगे।
• दूसरा पैरामीटर संक्रमण की अवधि है, और हमने 300ms डाल दिए हैं।
• तीसरा पैरामीटर संक्रमण की प्रगति की गति है। सहजता आपका मानक सहज प्रगतिशील परिवर्तन है।
• एनीमेशन पर देरी सेट करने के लिए चौथा संभावित पैरामीटर है, लेकिन हम इसे यहां उपयोग नहीं कर रहे हैं।

अब CSS ट्रांज़िशन के साथ, यदि आप पृष्ठ को फिर से लोड करते हैं और ऊपर और नीचे स्क्रॉल करते हैं, तो आप शीर्षलेख को ऊंचाई में अच्छा और सुचारू रूप से बदलते हुए देख पाएंगे!

एक डेमो देखना चाहते हैं? इसे मेरे GitHub पेज पर देखें!

आप मेरे GitHub रेपो पर सभी प्रोजेक्ट फ़ाइलें यहाँ से डाउनलोड कर सकते हैं।

समापन होने पर

स्टिकी हेडर बनाने पर इस ट्यूटोरियल को पढ़ने (या देखने!) के लिए धन्यवाद। मुझे आशा है कि आपने इसका आनंद लिया होगा और इसे मददगार पाया होगा!

अपने विचारों के साथ नीचे एक टिप्पणी छोड़ने के लिए स्वतंत्र महसूस करें 🙂