Bootstrap 4 Scrollspy
ستتعلم في هذا الدرس ال Scrollspy وهو يحدث الروابط تلقائيًا في ال Navbar بناءً على مكان ال Scroll في الصفحة بواسطة ال Bootstrap
التاريخ
07 ديسمبر 2021
الدروس
34
المستوى
العامة
اللغة
انجليزي
المشاهدات
1028
المواضيع
6
Bootstrap 4 Scrollspy
</> 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
ال 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>