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: 60px;  /* नेवबार ऊंचाई के लिए स्पेस */
      padding: 0px;
    }
    nav {
      position: fixed;
      top: -50px;        /* प्रारंभ में छुपा हुआ */
      width: 100%;
      background-color: rgb(39, 39, 39);
      overflow: auto;
      height: auto;
      transition: 0.5s;  /* स्मूथ एनिमेशन */
    }
    .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);
    }
    .sample-content {
      height: 150vh;  /* स्क्रॉलिंग के लिए लंबा कंटेंट */
    }
  </style>
</head>
<body>
  <nav>
    <a class="links selected" href="#">Home</a>
    <a class="links" href="#">Login</a>
    <a class="links" href="#">Register</a>
    <a class="links" href="#">Contact Us</a>
    <a class="links" href="#">More Info</a>
  </nav>
  
  <div class="sample-content">
    <h1>यहां कुछ हेडर्स हैं</h1>
    <h2>यहां कुछ हेडर्स हैं</h2>
    <h3>यहां कुछ हेडर्स हैं</h3>
    <h4>यहां कुछ हेडर्स हैं</h4>
    <h1>यहां कुछ हेडर्स हैं</h1>
    <h2>यहां कुछ हेडर्स हैं</h2>
    <h3>यहां कुछ हेडर्स हैं</h3>
    <h4>यहां कुछ हेडर्स हैं</h4>
  </div>
  
  <script>
    window.onscroll = scrollShowNav;
    function scrollShowNav() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementsByTagName("nav")[0].style.top = "0";
      } else {
        document.getElementsByTagName("nav")[0].style.top = "-50px";
      }
    }
  </script>
</body>
</html>

आउटपुट

ऊपर का कोड निम्न आउटपुट देगा:

• प्रारंभ में नेवबार छुपा हुआ (top: -50px)
• 20px से अधिक स्क्रॉल करने पर नेवबार ऊपर से स्लाइड होकर आता है (top: 0)
• ऊपर स्क्रॉल करने पर फिर से छुप जाता है

मुख्य बिंदु

• position: fixed - व्यूपोर्ट के सापेक्ष स्थिति
• transition: 0.5s - स्मूथ स्लाइड एनिमेशन
• window.onscroll - स्क्रॉल इवेंट लिसनर
• document.documentElement.scrollTop - क्रॉस-ब्राउज़र स्क्रॉल पोजीशन
• प्रदर्शन के लिए requestAnimationFrame या IntersectionObserver बेहतर विकल्प हैं