How To Create Sticky Header Html5 In Hindi With Animation

अगर कोई html मै या फिर किसी और language मै काम करता है, चाहें वो beginner हो या professional हो वो अपनी website को एक अच्छा और यूनिक layout देना चाहेगा | और हमारा आज का आर्टिकल How To Create Sticky Header Html5 In Hindi With Animation इसी base पर है |

अगर आपको html मै एनीमेशन sticky हैडर तेयार करना है तो आप एकदम सही जगह पर आये है, इस आर्टिकल मै हम sticky header के लिए use करेंगे html, css, और थोड़ी सी jQuery और बड़ी ही आसानी से हम एक animation sticky header तेयार कर सकते है कुछ ही मिनटों में |

Sticky Header Html5 क्या है ?(what is sticky header)

दोस्तों Sticky Header Html5 only html में ही नहीं कोई भी प्लेटफॉर्म हो चाहें WordPress हो magneto हो या shopify हो कोई भी हो आप इन सभी मैं website के हैडर में sticky add कर सकते हैं |

जब आप किसी website को open करते हैं और scroll करते हैं तो आपको हैडर दिखाई देगा या फिर Navigation Menu दिखाई देंगे, आप बड़ी-बड़ी website मैं देख सकते हैं जैसे Myntra

ये सब काम user के scroll करनें के बाद होता है जिसको हम sticky बोलते हैं |

सरल भाषा में बात करे एक उदहारण सहित तो,

आपकी एक वेबसाइट है blog की और आप वेबसाइट मै development या design के बारे मै कंटेंट पोस्ट करते है तो जाहिर सी बात है आप के पास केटेगरी भी होगी, और आप केटेगरी को वेबसाइट के header मै दिखा रहें है या फिर आपके पास important pages है जो आप वेबसाइट के header मै दिखाना चाहते है |

इस condition मै अगर कोई यूजर आपकी वेबसाइट पर visit करता है तो सबसे पहले उस यूजर को आपकी वेबसाइट का header ही दिखाई देगा क्योंकि header सबसे उपर होता है और header मै जो भी केटेगरी है या फिर pages है वो यूजर के सामने highlight होंगे |

अब मान लीजिये मै आपकी वेबसाइट पर as a यूजर visit करता हु और आपका कंटेंट मुझे पसंद आया है तो जाहिर है की वेबसाइट में निचे scroll करूंगा और मै आपकी वेबसाइट के bottom में आ गया कंटेंट पढ़ते-पढ़ते और अब मुझे आपकी दूसरी केटेगरी या फिर दुसरे pages का कंटेंट भी पढना है तो मुझे वापिस top मै scroll करना पड़ेगा आपकी वेबसाइट के header पर जाने के लिए तो इससे कई यूजर का मूड इससे ऑफ भी हो सकता है या कई यूज़र इससे irited भी हो सकते हैं |

इसी condition से बचने के लिए हम वेबसाइट के header मै sticky का use करते है | हैडर के आलावा हम किसी particular section मैं भी sticky जोड़ सकते हैं तरीका दोनों का एक ही रहेगा इसलिए आर्टिकल को अंत तक पढ़ते रहें |

उम्मीद है की आप आसान उदहारण से समझ गये होंगे की वेबसाइट में header sticky क्या होती है |

Sticky Header के फायदे

Sticky Header के काफी फायदे हैं जैसे अगर आप हैडर मैं sticky add करते हैं तो आपके useful पेजेज और useful लिंक आपकी ऑडियंस के सामनें होंगे, चाहे ऑडियंस scroll करे या ना करे |

अगर आपकी ऑडियंस website के other पेजों पर visit करती है तो इससे website की रैंक ऊपर होगी और website पर और ज्यादा ट्रैफिक आएगा जिससे website को काफी फायदा मिलेगा |

Sticky Header Html5 क्या जरूरी है ?

ये एक common question है की Sticky Header जरूरी है या नही |

ये कोई जरूरी नही है की आप header या menu को sticky रखो इस टाइप की कोई भी पाबंदी नही होती है, ये depend करता है आपकी वेबसाइट पर जेसे अगर आपकी वेबसाइट ब्लॉग से रिलेटेड है और आपके header मै या फिर navbar (menu) मै कोई केटेगरी है या कोई important pages है और आप चाहते है की user उन पर भी visit करे तो उस condition मै आप menu या फिर header को sticky रख सकते है |

Sticky Header Html5 को add कैसे करे ?

अब बात करे Sticky Header Html5 को add केसे करे ? तो इसको html मै header को sticky करना काफी आसान है, कुछ step है जो आपको follow करने है |

Sticky Header Html5 के step

Step-1 सबसे पहले आपको एक html document बनाना होगा आपकी वेबसाइट के लिए |

Step-2 उसके बाद आपको jQuery की library add करनी होगी या तो आप cdn लिंक से कर सकते है या सेव कर के भी कर सकते है, इसके दोनों तरीक़े आपको मेरे पिछले आर्टिकल Slick Slider पर मिल जाएँगे |

यहाँ आप नीचे देख सकते हैं jQuery की लाइब्रेरी का CDN लिंक |

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Step-3 अब आपको header मै scroll पर class add करवानी है जिस पर हम css कर सकते है, क्लास add करवाने के लिए आपको छोटा सा script का कोड डालना पड़ेगा जो इस प्रकार है |

<script>
 $(window).scroll(function(){
  var sticky = $('header'),
   scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});
</script>

Step-4 अब आपको css करनी पड़ेगी उस क्लास पर जो हमने header के scroll पर add की है scroll पर एनीमेशन के लिए आपको key-frame भी add करना होगा जिसका कोड आप नीचे देख सकते हैं |

.fixed{
   position: fixed;
   top: 0;
   left: 0;
   animation: scrolltop .7s linear;
   background: #184099;
   padding: 10px 0px;
}
@keyframes scrolltop {
   0% { top: -100px; opacity: .4; }
   100% { top: 0; opacity: 1; }
}

अब आप Sticky Header Html5 का फाइनल कोड देख सकते है और इसे try भी कर सकते है |

Sticky Header using pure CSS

अगर आप बिना jquery के sticky header बनाना चाहते हैं तो यह काफ़ी आसान है क्योंकि इसके लिए आपको सिर्फ़ CSS की property का ध्यान होना चाहिए.

अगर आप position property का इस्तेमाल करते हैं तो आप आसानी से बिना किसी jQuery की सहायता के Sticky Header लगा सकते हैं अपने प्रोजेक्ट में.

नीचे प्रॉपर्टी दी गई है जिन्हें आप इस्तेमाल कर सकते हैं.

header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

आप absolute वैल्यू का उपयोग कर सकते हैं या फिर आप fixed का भी इस्तेमाल कर सकते हैं.

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

Conclusion

उम्मीद है दोस्तों आज Sticky Header Html5 के इस आर्टिकल से आपकी कुछ help हुई होगी, अगर आपको ये आर्टिकल helpful लगा हो तो आप इस आर्टिकल को अपनें दोस्तों के साथ share जरुर करें और ताज़ा अपडेट पानें के लिए आप मेरे साथ social media से भी जुड़ सकते हैं |

अगर आपका कोई सवाल हो तो आप कमेंट कर सकते हैं मुझे ख़ुशी होगी आपका जवाब देने में |

धन्यवाद