Bootstrap

Bootstrap 4 Scrollspy

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

التاريخ

07 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1028

المواضيع

6
الشروحات chevron_left Bootstrap 4 Scrollspy chevron_left Bootstrap

Bootstrap 4 Scrollspy

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

ال CSS position Property اجباري مع ال Element الزي نقوم باضافة ال data-spy=scroll ليعمل ال scrollspy بشكل صحيح

</> Scrollspy Vertical Menu

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

<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>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات