Bootstrap 4 Scrollspy
ستتعلم في هذا الدرس ال Scrollspy وهو يحدث الروابط تلقائيًا في ال Navbar بناءً على مكان ال Scroll في الصفحة بواسطة ال Bootstrap
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
