انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 32
دورة Bootstrap

Bootstrap 4 Scrollspy

ستتعلم في هذا الدرس ال Scrollspy وهو يحدث الروابط تلقائيًا في ال Navbar بناءً على مكان ال Scroll في الصفحة بواسطة ال Bootstrap 

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
2
الأمثلة
1
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,029
محتوى الدرس
في هذا الدرس 2تصفّح المواضيع

Bootstrap 4 Scrollspy

يستخدم ال Bootstrap Scrollspy لتحديث الروابط تلقائيًا في ال Navbar بناءً على مكان ال Scroll في الصفحة

طريقة انشاء ال Scrollspy

  • اضف data-spy=scroll الي ال Element الذي نظهر بداخله ال scroll bar وهو ال body Element
  • نقوم بإضافة data-target attribute متبوعة بالقيمة ال ID او ال Class لل body
  • نقوم بأنشاء روابط منفصلة لل navbar
  • نقوم بأنشاء مجموعو من ال div لعمل المحتوي الزي يظهر عندما يتم تحريك ال scroll
  • نقوم بربط عناصر المحتوي بال links عن طريق إضافة id لكل Element به محتوي ونضع بداخل ال links خاصية href attribute بداخلها نفس ال id

Result

جرّب بنفسك

Scrollspy Vertical Menu

في هذا المثال طريقة عمل ال Scrollspy بشكل رأسي بداخل ال navbar

HTML 
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">

  <div class="container-fluid">
    <div class="row">
      <nav class="col-sm-3 col-4" id="myScrollspy">
        <ul class="nav nav-pills flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#section1">Section 1</a>
          </li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9 col-8">
        <div id="section1">
          <h1>Section 1</h1>
          <p>Try to scroll this page and look at the menu while scrolling!</p>
        </div>
        ...
      </div>
    </div>
  </div>

</body>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…