Scrollspy

📌 Scrollspy به شما اجازه می‌دهد که وقتی کاربر صفحه را اسکرول می‌کند، لینک‌های ناوبری به صورت خودکار فعال (active) شوند و بخش فعلی صفحه را نشان دهند.
این ابزار معمولاً برای محتوای بلند یا یک صفحه با بخش‌های مختلف استفاده می‌شود.

✅ راه‌اندازی ساده Scrollspy

<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="50" tabindex="0">
  
  <!-- Navbar -->
  <nav id="navbar-example" class="navbar bg-light flex-column position-fixed">
    <a class="nav-link active" href="#section1">بخش ۱</a>
    <a class="nav-link" href="#section2">بخش ۲</a>
    <a class="nav-link" href="#section3">بخش ۳</a>
  </nav>

  <!-- محتوا -->
  <div style="margin-left:200px; padding:20px;">
    <h4 id="section1">بخش ۱</h4>
    <p>محتوای بخش ۱ …</p>
    <h4 id="section2">بخش ۲</h4>
    <p>محتوای بخش ۲ …</p>
    <h4 id="section3">بخش ۳</h4>
    <p>محتوای بخش ۳ …</p>
  </div>

</body>

  • data-bs-spy="scroll" → فعال‌سازی Scrollspy

  • data-bs-target="#navbar-example" → لینک‌های فعال در کدام Navbar یا Nav قرار دارند

  • data-bs-offset="50" → فاصله پیکسل از بالا برای فعال شدن لینک

✅ Scrollspy با کلاس‌های فعال

  • وقتی کاربر بخش ۱ را مشاهده می‌کند → لینک مربوطه active می‌شود.

  • هنگام اسکرول به بخش ۲ → لینک بخش ۲ فعال می‌شود.

  • Bootstrap به صورت خودکار کلاس active را مدیریت می‌کند.

✅ Scrollspy با جاوااسکریپت

می‌توان Scrollspy را به صورت داینامیک با JS هم فعال کرد:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example',
  offset: 50
});

✅ نکات مهم

  • Navbar یا Nav باید لینک‌های Anchor به بخش‌های صفحه داشته باشد (href="#section1").

  • بخش‌ها (id) باید با href لینک‌ها مطابقت داشته باشند.

  • Scrollspy نیازمند JS بوت‌استرپ است.

  • Scrollspy برای صفحات طولانی با بخش‌های مشخص بسیار کاربردی است و تجربه کاربری را بهبود می‌بخشد.