CSS और JavaScript से स्टिकी नेवबार कैसे बनाएं?

CSS और JavaScript का उपयोग करके एक स्टिकी नेवबार बनाने का पूरा कोड नीचे दिया गया है। यह नेवबार स्क्रॉल करने पर पेज के शीर्ष पर फिक्स हो जाता है।

उदाहरण

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>स्टिकी नेवबार</title> 
  <style> 
    body { 
      margin: 0px; 
      margin-top: 10px; 
      padding: 0px; 
      height: 150vh; /* स्क्रॉल इफेक्ट के लिए */ 
    } 
    nav { 
      width: 100%; 
      background-color: rgb(39, 39, 39); 
      overflow: auto; 
      height: auto; 
    } 
    .links { 
      display: inline-block; 
      text-align: center; 
      padding: 14px; 
      color: rgb(178, 137, 253); 
      text-decoration: none; 
      font-size: 17px; 
    } 
    .links:hover { 
      background-color: rgb(100, 100, 100); 
    } 
    .selected { 
      background-color: rgb(0, 18, 43); 
    } 
    .fixed { 
      position: fixed; 
      top: 0; 
    } 
    .fixed + .sample-content { 
      padding-top: 60px; 
    } 
  </style> 
</head> 
<body> 
  <div class="sample-content"> 
    <h1>यहां कुछ हेडर्स हैं</h1> 
    <h2>यहां कुछ हेडर्स हैं</h2> 
    <h3>यहां कुछ हेडर्स हैं</h3> 
    <h4>यहां कुछ हेडर्स हैं</h4> 
  </div> 
  <nav> 
    <a class="links selected" href="#">होम</a> 
    <a class="links" href="#">लॉगिन</a> 
    <a class="links" href="#">रजिस्टर</a> 
    <a class="links" href="#">संपर्क करें</a> 
    <a class="links" href="#">अधिक जानकारी</a> 
  </nav> 
  <div class="sample-content"> 
    <h1>नेव के बाद कुछ हेडर्स</h1> 
    <h2>नेव के बाद कुछ हेडर्स</h2> 
    <h3>नेव के बाद कुछ हेडर्स</h3> 
    <h4>नेव के बाद कुछ हेडर्स</h4> 
  </div> 
  <script> 
    window.onscroll = scrollShowNav; 
    let navEle = document.getElementsByTagName("nav")[0]; 
    let stickyTop = navEle.offsetTop; 
    function scrollShowNav() { 
      if (window.pageYOffset >= stickyTop) { 
        navEle.classList.add("fixed"); 
      } else { 
        console.log('WOW'); 
        navEle.classList.remove("fixed"); 
      } 
    } 
  </script> 
</body> 
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

निर्दिष्ट पोजिशन पर स्क्रॉल करने पर, नेवबार position: fixed की तरह काम करेगा:

मुख्य कॉन्सेप्ट:

• offsetTop - नेवबार की मूल पोजिशन प्राप्त करता है
• window.pageYOffset - वर्तमान स्क्रॉल पोजिशन देता है
• .fixed क्लास - position: fixed और top: 0 सेट करता है
• .fixed + .sample-content - एडजेसेंट सिबलिंग सेलेक्टर से कंटेंट जंप रोकता है

आधुनिक विकल्प:

आधुनिक ब्राउज़र्स में, आप केवल CSS का उपयोग कर सकते हैं:

nav { 
  position: sticky; 
  top: 0; 
  z-index: 100; 
}

यह JavaScript की आवश्यकता को समाप्त करता है और बेहतर प्रदर्शन देता है।