CSS और JavaScript से स्क्रॉल पर नेविगेशन बार का आकार कैसे बदलें?

CSS और JavaScript का उपयोग करके स्क्रॉल करने पर नेविगेशन बार को सिकोड़ने (shrink) का पूरा कोड नीचे दिया गया है। यह प्रभाव आधुनिक वेबसाइट्स में आम है जहां नेवबार स्क्रॉल डाउन करने पर छोटा हो जाता है।

उदाहरण

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>स्क्रॉल पर नेवबार रिसाइज</title> 
  <style> 
    *, *::before, *::after { 
      box-sizing: border-box; 
    } 
    body { 
      margin: 0px; 
      margin-top: 60px; 
      padding: 0px; 
    } 
    nav { 
      position: fixed; 
      top: 0px; 
      width: 100%; 
      background-color: rgb(39, 39, 39); 
      overflow: auto; 
      height: auto; 
      transition: 0.5s; 
      padding: 50px 10px; 
    } 
    .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; 
    } 
    .company-logo { 
      font-size: 50px; 
      color: white; 
      position: absolute; 
      right: 30px; 
      transition: 0.3s; 
    } 
  </style> 
</head> 
<body> 
  <nav> 
    <a class="company-logo">€</a> 
    <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> 
    <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.padding = "10px 10px"; 
        document.querySelector(".company-logo").style.fontSize = "20px"; 
      } else { 
        document.getElementsByTagName("nav")[0].style.padding = "40px 50px"; 
        document.querySelector(".company-logo").style.fontSize = "50px"; 
      } 
    } 
  </script> 
</body> 
</html>

आउटपुट

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

पेज स्क्रॉल करने पर नेव इस प्रकार सिकुड़ जाएगा:

कैसे काम करता है:

• transition: 0.5s - नेवबार पर स्मूथ एनीमेशन के लिए
• scrollTop > 20 - 20px स्क्रॉल होने पर ट्रिगर होता है
• padding और font-size बदलना - नेवबार और लोगो दोनों को सिकोड़ता है
• position: fixed - नेवबार को हमेशा शीर्ष पर रखता है

बेहतर दृष्टिकोण (क्लास-आधारित):

// CSS में
nav.scrolled { 
  padding: 10px 10px; 
}
nav.scrolled .company-logo { 
  font-size: 20px; 
}

// JavaScript में
if (window.scrollY > 20) {
  nav.classList.add('scrolled');
} else {
  nav.classList.remove('scrolled');
}

यह तरीका अधिक रखरखाव योग्य है क्योंकि स्टाइलिंग CSS में रहती है।