CSS এবং জাভাস্ক্রিপ্ট দিয়ে স্ক্রল করার সময় নেভবার রিসাইজ (Shrink) কীভাবে করবেন?

স্ক্রল করলে নেভবার ছোট হয়ে যাওয়া (Navbar Shrink on Scroll)

বড় হেডার/নেভবার স্ক্রল করার সাথে সাথে কম্প্যাক্ট হয়ে যায় — এটি আধুনিক ওয়েবসাইটে খুব জনপ্রিয় একটি UX প্যাটার্ন। লোগো ছোট হয়, প্যাডিং কমে, বাকি কন্টেন্টের জন্য জায়গা বাঁচায়।

পূর্ণ কোড উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>নেভবার শ্রিংক অন স্ক্রল</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { 
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
      min-height: 200vh; /* স্ক্রল용 */
    }
    
    /* নেভবার - ফিক্সড এবং ট্রানজিশনসহ */
    nav {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #272727;
      overflow: hidden;
      transition: padding 0.4s ease, background 0.3s ease;
      padding: 40px 20px; /* প্রাথমিক বড় প্যাডিং */
      z-index: 1000;
    }
    
    /* শ্রিংক অবস্থা (JS-এ ক্লাস যোগ হবে) */
    nav.shrunk {
      padding: 10px 20px; /* ছোট প্যাডিং */
      box-shadow: 0 2px 15px rgba(0,0,0,0.2);
    }
    
    /* লোগো */
    .logo {
      font-size: 40px;
      color: white;
      font-weight: bold;
      text-decoration: none;
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      transition: font-size 0.4s ease, top 0.4s ease;
    }
    nav.shrunk .logo {
      font-size: 22px;
    }
    
    /* নেভ লিংক */
    .nav-link {
      display: inline-block;
      padding: 10px 16px;
      color: #b289fd;
      text-decoration: none;
      font-size: 16px;
      transition: color 0.3s;
    }
    .nav-link:hover { color: #fff; }
    .nav-link.selected { color: #fff; background: #00122b; border-radius: 4px; }
    
    /* ডেমো কন্টেন্ট */
    .content {
      margin-top: 120px; /* নেভবারের প্রাথমিক উচ্চতার চেয়ে বেশি */
      padding: 20px;
    }
  </style>
</head>
<body>
  <nav id="navbar">
    <a href="#" class="logo">€</a>
    <a class="nav-link selected" href="#">হোম</a>
    <a class="nav-link" href="#">লগইন</a>
    <a class="nav-link" href="#">রেজিস্টার</a>
    <a class="nav-link" href="#">যোগাযোগ</a>
    <a class="nav-link" href="#">আরও তথ্য</a>
  </nav>
  
  <div class="content">
    <h1>স্ক্রল করে নিচে যান — নেভবার ছোট হবে</h1>
    <p>লরেম ইপসাম... (বহু কন্টেন্ট)</p>
    <h2>সেকশন ২</h2>
    <p>আরও কন্টেন্ট...</p>
    <h2>সেকশন ৩</h2>
    <p>শেষ কন্টেন্ট...</p>
  </div>
  
  <script>
    const nav = document.getElementById('navbar');
    const logo = nav.querySelector('.logo');
    const shrinkThreshold = 20; // পিক্সেল স্ক্রল হলে শ্রিংক শুরু
    
    window.addEventListener('scroll', () => {
      const scrollY = window.pageYOffset || document.documentElement.scrollTop;
      
      if (scrollY > shrinkThreshold) {
        nav.classList.add('shrunk');
      } else {
        nav.classList.remove('shrunk');
      }
    });
    
    // রিসাইজ হ্যান্ডলিং (ঐচ্ছিক)
    window.addEventListener('resize', () => {
      // লোগো পজিশন রিক্যালকুলেট করুন যদি প্রয়োজন হয়
    });
  </script>
</body>
</html>

কীভাবে কাজ করে

1. নেভবার `position: fixed`: সবসময় ভিউপোর্টের টপে থাকে।
2. প্রাথমিক স্টেট: বড় `padding: 40px 20px` এবং বড় লোগো (`font-size: 40px`)。
3. স্ক্রল থ্রেশহোল্ড: `20px` স্ক্রল হলে `nav.shrunk` ক্লাস যোগ।
4. CSS ট্রানজিশন: `padding`, `font-size`, `box-shadow` — সব স্মুথ অ্যানিমেট।
5. কন্টেন্ট মার্জিন: `.content`-এ `margin-top` দিয়ে নেভবারের নিচে কন্টেন্ট শুরু।

কাস্টমাইজেশন আইডিয়া

পারফরম্যান্স টিপস

• Throttle/Debounce: স্ক্রল ইভেন্টে тяжеলো লজিক থাকলে `requestAnimationFrame` বা Lodash `_.throttle` ব্যবহার করুন।
• IntersectionObserver: একটি সেন্টিনেল এলিমেন্ট ব্যবহার করে নেভবারের পজিশন ডিটেক্ট করুন — স্ক্রল লিসেনারের চেয়ে পারফরম্যান্স ভালো।
• Will-change: `nav { will-change: padding, transform; }` (ব্যবহার সাবধানে)।

IntersectionObserver উদাহরণ (আধুনিক পদ্ধতি)

const sentinel = document.createElement('div');
sentinel.style.height = '1px';
document.body.insertBefore(sentinel, document.body.firstChild);

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    nav.classList.toggle('shrunk', !entry.isIntersecting);
  });
}, { threshold: 0 });

observer.observe(sentinel);

এই প্যাটার্নটি যেকোনো ল্যান্ডিং পেজ, ড্যাশবোর্ড, বা কন্টেন্ট-ভারি সাইটে ব্যবহার করা যায়।