इस प्रभावी और शक्तिशाली तकनीक को हासिल करना आपकी अपेक्षा से कहीं अधिक आसान है।

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

स्टिकी हेडर का क्या उपयोग है?

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

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

हेडर डिज़ाइन करना: HTML संरचना

किसी भी स्टिकी हेडर की नींव उसकी HTML संरचना होती है। यहां बताया गया है कि अपने स्टिकी हेडर के लिए आवश्यक HTML तत्व कैसे बनाएं।

instagram viewer 

<body>
<header>
<spanclass="logo">Company Logo 🏠span>
<nav>
<ul>
<li><ahref="#home">Homea>li>
<li><ahref="#about">Abouta>li>
<li><ahref="#services">Servicesa>li>
<li><ahref="#contact">Contacta>li>
ul>
nav>
header>
<mainid="home"><h1>Home pageh1>main>
<sectionid="about"><h1>Abouth1>section>
<sectionid="services"><h1>Servicesh1>section>
<sectionid="contact"><h1>Contacth1>section>
body>

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

सीएसएस के साथ जमीनी कार्य करना

नीचे दिए गए CSS कोड का उपयोग करता है बॉक्स मॉडल गुण प्रत्येक प्लेसहोल्डर अनुभाग के लिए ऊंचाई के साथ एक आकर्षक डिज़ाइन बनाने के लिए पैडिंग, मार्जिन और फ्लेक्सबॉक्स की तरह।

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


main,
section { height: 100vh; }


.logo { font-size: 3rem; }


main,
header,
section {
display: flex;
align-items: center;
}


main { justify-content: center; }


header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb; 
}


navul {
display: flex;
column-gap: 2rem;
list-style: none;
}


a {
text-decoration: none;
font-size: 2rem;
color: #333;
}


section { justify-content: center; }


#home { background: #2c3e50; }


#about { background: #ccccff; }


#services { background: #f5b7b1; }


#contact { background: #40e0d0; }


h1 {
 font-size: 4rem;
 color: #fff;
}

पेज अब इस तरह दिखना चाहिए:

चिपचिपा प्रभाव लागू करना: सीएसएस

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

यह प्रॉपर्टी उपयोगकर्ता की स्क्रॉल स्थिति के आधार पर सापेक्ष और निश्चित स्थिति के संयोजन की तरह व्यवहार करती है।

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}

हेडर को स्टिकी पर सेट करने से यह सुनिश्चित होता है कि यह स्क्रॉल की परवाह किए बिना पृष्ठ पर एक स्थिति पर चिपका रहता है। शीर्ष गुण निर्दिष्ट करता है कि पृष्ठ पर शीर्षलेख कहाँ रखा जाना चाहिए। अब, पृष्ठ को नीचे स्क्रॉल करने पर यह प्राप्त होता है:

संभावित स्टैकिंग मुद्दों का समाधान

कभी-कभी, पृष्ठ पर अन्य तत्व स्टिकी हेडर के साथ ओवरलैप हो सकते हैं। यह सुनिश्चित करने के लिए कि हेडर शीर्ष पर रहे, आप z-index प्रॉपर्टी जोड़ सकते हैं:

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}

अंत में, बेहतर उपयोगकर्ता अनुभव के लिए HTML तत्व में सहज स्क्रॉलिंग गुण जोड़ें:

html {
font-size: 62.5%;
scroll-behavior: smooth;
}

पृष्ठ को अब अनुभागों के बीच सुचारू रूप से स्क्रॉल करना चाहिए:

सीएसएस स्टिकी हेडर के साथ वेब नेविगेशन को उन्नत करना

अपनी वेबसाइट डिज़ाइन में एक स्टिकी हेडर जोड़ने से उपयोगकर्ता अनुभव में काफी सुधार हो सकता है। यह सुविधा उपयोगकर्ताओं को मुख्य मेनू से जोड़े रखती है, एक सुसंगत ब्रांड बनाए रखती है और आपकी वेबसाइट को एक आधुनिक रूप देती है।

सीएसएस की शक्ति से, यह प्रभाव पैदा करना सीधा और प्रभावी है। वेब डिज़ाइन के रुझान समय के साथ बदलते हैं, लेकिन स्टिकी हेडर विभिन्न उद्योगों के लिए हमेशा उपयोगी होता है।