Scrollspy Bootstrap 5

Scrollspy

استخدام Scrollspy بناءً علىالتمريرتحديث المواقع تلقائيًا في قائمة الروابط الخاصة بـ التوجيه.

كيفية إنشاء Scrollspy

في هذا المثال، يتم عرض كيفية إنشاء Scrollspy:

مثال

<!-- منطقة تمرير -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- قائمة التوجيهية - عناصر <a> تستخدم للقفز إلى جزء معين من المنطقة القابلة للتمرير -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">قسم 1</a></li>
    ...
</nav>
<!-- قسم 1 -->
<div id="section1">
  <h1>قسم 1</h1>
  <p>جرب تمرير هذه الصفحة وألق نظرة على القائمة التوجيهية أثناء التمرير!</p>
</div>
...
</body>

جرب بنفسك

مثال

التفسير data-bs-spy="scroll" أضف إلى العنصر الذي سيتم استخدامه كمنطقة تمرير (عادة ما يكون هذا العنصر) <body> العنصر).

ثم أضف data-bs-target الخاصية، والتي لها قيمة id أو اسم الصنف الخاص بالقائمة التوجيهية (.navbar)، هذا لضمان توصيل القائمة التوجيهية بالمنطقة القابلة للتمرير.

لاحظ أن العنصر القابل للتمرير يجب أن يتطابق مع ID في الروابط الموجودة في قائمة القائمة التوجيهية (<div id="section1"> التطابق <a href="#section1">)

اختياري data-bs-offset الخاصية تحدد عدد البكسلات الإضافية التي يتم استبعادها عند حساب موقع التمرير. عند الانتقال إلى العنصر القابل للتمرير من خلال رابط في القائمة التوجيهية، إذا شعرت بأن حالة النشاط قد تغيرت مبكرًا جدًا، فإن هذا يمكن أن يكون مفيدًا. القيمة الافتراضية هي 10 بكسل.

الوضع النسبي مطلوبالنص، الذي يحتوي على data-bs-spy="scroll"، يتطلب CSS الوضع يجب تعيين قيمة الخاصية إلى "relative" لتعمل بشكل صحيح.