CSS এবং জাভাস্ক্রিপ্ট দিয়ে স্টিকি নেভবার (Sticky Navbar) কীভাবে তৈরি করবেন?

স্ক্রল করলে নেভবার উপরে আটকে যাওয়া (Sticky/Fixed on Scroll)

একটি নেভবার যা পেজের শীর্ষে থাকে, কিন্তু স্ক্রল করে নিচে যাওয়ার সাথে সাথে ভিউপোর্টের টপে `position: fixed` হয়ে আটকে যায়। এটি ব্যবহারকারীর নেভিগেশন সুবিধা বাড়ায়।

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

<!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; 
      height: 200vh; /* স্ক্রল তৈরি করার জন্য */ 
    }
    
    /* নেভবার বেস স্টাইল */
    nav {
      width: 100%;
      background-color: #272727;
      overflow: hidden;
      transition: all 0.3s ease;
      z-index: 100;
    }
    
    .nav-link {
      display: inline-block;
      padding: 14px 20px;
      color: #b289fd;
      text-decoration: none;
      font-size: 17px;
      transition: background 0.3s;
    }
    .nav-link:hover { background-color: #646464; }
    .nav-link.selected { background-color: #00122b; }
    
    /* স্টিকি ক্লাস (JS-এ যোগ/বাদ হবে) */
    nav.fixed {
      position: fixed;
      top: 0;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    
    /* কন্টেন্ট প্যাডিং: নেভবার fixed হলে কন্টেন্ট উপরে যাবে না */
    .content-spacer {
      display: none; /* ডিফল্ট লুকানো */
      height: 60px; /* নেভবারের উচ্চতা অনুযায়ী */
    }
    nav.fixed + .content-spacer { display: block; }
    
    /* ডেমো কন্টেন্ট */
    .content { padding: 20px; }
  </style>
</head>
<body>
  <!-- স্পেসার ডিভ: নেভবার fixed হলে কন্টেন্ট জাম্প না কর为此 -->
  <div class="content-spacer" id="spacer"></div>
  
  <nav id="navbar">
    <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>
    <h3>সাব হেডার</h3>
    <p>এবং আরও...</p>
  </div>
  
  <script>
    const nav = document.getElementById('navbar');
    const spacer = document.getElementById('spacer');
    
    // নেভবারের মূল পজিশন (টপ থেকে দূরত্ব) সংরক্ষণ
    const navTop = nav.offsetTop;
    const navHeight = nav.offsetHeight;
    
    // স্পেসারের উচ্চতা নেভবারের সমান সেট করুন
    spacer.style.height = navHeight + 'px';
    
    window.addEventListener('scroll', () => {
      if (window.pageYOffset >= navTop) {
        // স্ক্রল পজিশন নেভবার পাস করলে -> fixed
        nav.classList.add('fixed');
      } else {
        // উপরে ফিরলে -> static
        nav.classList.remove('fixed');
      }
    });
    
    // রিসাইজ হ্যান্ডলিং (নেভবার হাইট পরিবর্তন হলে)
    window.addEventListener('resize', () => {
      spacer.style.height = nav.offsetHeight + 'px';
    });
  </script>
</body>
</html>

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

1. প্রাথমিক অবস্থা: নেভবার নরমাল ফ্লোতে (`position: static` ডিফল্ট)।
2. স্ক্রল ইভেন্ট: `window.pageYOffset` (স্ক্রল করা পিক্সেল) নেভবারের `offsetTop`-এর চেয়ে বড় হলে `fixed` ক্লাস যোগ।
3. CSS `.fixed`: `position: fixed; top: 0` দিয়ে ভিউপোর্টের টপে আঙ্কুর।
4. স্পেসার ডিভ: নেভবার `fixed` হলে ডকুমেন্ট ফ্লো থেকে বের হয়, ফলে নিচের কন্টেন্ট উপরে ঝাঁপিয়ে যায়। এটিকে রোধ করতে নেভবারের উচ্চতাসহ একটি লুকানো `div` (`.content-spacer`) রাখা হয়, যা `nav.fixed + .content-spacer { display: block }` দিয়ে শুধু স্টিকি অবস্থায় দেখায়।

আধুনিক বিকল্প: CSS `position: sticky` (নো জাভাস্ক্রিপ্ট!)

আধুনিক ব্রাউজারগুলো (সহ IE11 বাদে) `position: sticky` সাপোর্ট করে — জাভাস্ক্রিপ্ট ছাড়া একই ইফেক্ট:

nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #272727; /* ব্যাকগ্রাউন্ড অবশ্যক, না হলে কন্টেন্ট পিছনে見える */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

• সীমাবদ্ধতা: প্যারেন্টে `overflow: hidden/auto/scroll` থাকলে কাজ করে না। টেবিল হেডার, ফ্লেক্স/গ্রিড কন্টেইনার কিছু ক্ষেত্রে সমস্যা সৃষ্টি করতে পারে।
• জাভাস্ক্রিপ্ট পদ্ধতির সুবিধা: পুরানো ব্রাউজার সাপোর্ট, আরও নিয়ন্ত্রণ (শ্যাডো, ব্যাকগ্রাউন্ড পরিবর্তন, অ্যানিমেশন), স্পেসার ম্যানেজমেন্ট।

উন্নত ফিচার (JS পদ্ধতিতে)

নামা দ্রষ্টব্য: `offsetTop` প্যারেন্টের রিলেটিভ। যদি নেভবার কোনো কন্টেইনারের ভিতরে থাকে, তাহলে `nav.getBoundingClientRect().top + window.pageYOffset` ব্যবহার করুন।