مقدمه في Bootstrap 5 Scrollspy
-
يتعامل Scrollspy مع navigation list حسب مكان شريط التمرير scroll position، بحيث يتم تحديث الروابط تلقائيًا في navigation list بناءً على scroll position. بحيث يتم الاشارة إلى الرابط النشط حاليًا في منفذ العرض viewport.
نطبق مثال حتى نفهم الموضوع.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav id="navbar-example2" class="navbar navbar-expand-lg navbar-light bg-light nav-fill">
<a class="navbar-brand" href="#"> Bootstrap 5 Scrollspy</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#section1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Second</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Third</a>
</li>
</ul>
</nav>
<div id="section1" class="container-fluid border" style="padding:100px 10px;">
<h1>First 1</h1>
<p>First 1 , First 1 , First 1, First 1, First 1, First 1 , First 1, First 1 , First 1, First 1 , First 1</p>
</div>
<div id="section2" class="container-fluid border" style="padding: 100px 10px;">
<h1>Second 2</h1>
<p>Second 1 , Second 1 , Second 1, Second 1, Second 1, Second 1 , Second 1, Second 1 , Second 1, Second 1 , Second 1</p>
</div>
<div id="section3" class="container-fluid border" style="padding: 100px 10px;">
<h1>Third 3</h1>
<p>Third 1 , Third 1 , Third 1, Third 1, Third 1, Third 1 , Third 1, Third 1 , Third 1, Third 1 , Third 1</p>
</div>
</body>
</html>
النتيجة:
تمام نفهم شو عملنا.
تمام التمام نفهم شو عملنا.
اضفنا في body الكود "data-bs-spy="scroll وهذا يعني ان منطة التمرير scrollable area هون بتكون هي body (غالبًا ما يكون هذا هو عنصر <body> وممكن يكون غير ذلك).
بعد هيك اضفنا attribute باسم data-bs-target بقيمة Id أو class name لشريط التنقل navigation bar (.navbar) والهدف من هذه الاضافة التأكد من أن شريط التنقل navbar متصل بالمنطقة القابلة للتمرير scrollable area.
وبعد هيك اضفنا attribute باسم data-bs-offset بهدف تحديد عدد البكسل الي بتم ازاحتها من الأعلى عند حساب موضع التمرير. يكون هذا مفيدًا عندما تشعر أن الروابط الموجودة داخل شريط التنقل تغير الحالة النشطة في وقت قريب جدًا أو مبكرًا جدًا عند القفز إلى العناصر القابلة للتمرير. الافتراضي هو 10 بكسل.
الكود:
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
اضفنا في البداية شريط navbar يحتوي على 3 items واضفنا لكل item رابط باستخدام href
الكود:
<nav id="navbar-example2" class="navbar navbar-expand-lg navbar-light bg-light nav-fill">
<a class="navbar-brand" href="#"> Bootstrap 5 Scrollspy</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#section1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Second</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Third</a>
</li>
</ul>
</nav>
وتم ربطعها مع <div> بنفس الاسم الي اضفناها في الاسفل.
الكود:
<div id="section1" class="container-fluid border" style="padding:100px 10px;">
<h1>First 1</h1>
<p>First 1 , First 1 , First 1, First 1, First 1, First 1 , First 1, First 1 , First 1, First 1 , First 1</p>
</div>
اترك تعليقك