सीएसएस के साथ स्टिकी हेडर कैसे बनाएं

आप जैसे पाठक MUO को समर्थन देने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन कमा सकते हैं। और पढ़ें।

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

दिन का एमयूओ वीडियो सामग्री जारी रखने के लिए स्क्रॉल करें

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

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

स्टिकी हेडर रखने के कुछ लाभों में बेहतर उपयोगकर्ता अनुभव और आसान वेबसाइट नेविगेशन शामिल हैं।

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

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

नेटवर्क पासवर्ड कैसे बदलें विंडोज़ 10

 <body> 
   <header> 
     <span class="logo">Company Logo 🏠</span> 
     <nav> 
       <ul> 
         <li><a href="#home">Home</a></li> 
         <li><a href="#about">About</a></li> 
         <li><a href="#services">Services</a></li> 
         <li><a href="#contact">Contact</a></li> 
       </ul> 
     </nav> 
   </header> 
   <main id="home"><h1>Home page</h1></main> 
   <section id="about"><h1>About</h1></section> 
   <section id="services"><h1>Services</h1></section> 
   <section id="contact"><h1>Contact</h1></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;  
} 
 
nav ul { 
  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; 
}

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

कैसे पता करें कि मेरा ईमेल किन वेबसाइटों पर पंजीकृत है

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

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

सीएसएस के साथ स्टिकी हेडर कैसे बनाएं

स्टिकी हेडर क्या है?

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

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

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

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

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