آموزش‌های Scrollspy Bootstrap 5

Scrollspy

Scrollspy برایگشت و گذارلیست لینک‌های منوی هدایت خودکار به‌روزرسانی می‌شود.

چگونه Scrollspy ایجاد کنیم

در اینجا نحوه ایجاد Scrollspy را نشان می‌دهیم:

مثال

<!-- منطقه قابل رولینگ -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- ناوبری - عناصر <a> برای جستجوی بخش‌های قابل رولینگ در داخل یک منطقه قابل رولینگ استفاده می‌شوند -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">بخش 1</a></li>
    ...
</nav>
<!-- بخش 1 -->
<div id="section1">
  <h1>بخش 1</h1>
  <p>لطفاً این صفحه را به حرکت درآورید و در حال حرکت به ناوبری نگاه کنید!</p>
</div>
...
</body>

آزمایش کنید

توضیح مثال

را data-bs-spy="scroll" به عنصر استفاده شده به عنوان منطقه قابل رولینگ اضافه کنید (معمولاً <body> ) اضافه کنید.

سپس عنصر data-bs-target ویژگی با مقدار id یا نام کلاس ناوبری (.navbar) تا اطمینان حاصل شود که ناوبری با منطقه قابل رولینگ مرتبط است.

لطفاً توجه داشته باشید که عنصرهای قابل رولینگ باید با شناسه‌های لینک‌های موجود در لیست ناوبری تطابق داشته باشند (<div id="section1"> مطابقت <a href="#section1">)

اختیاری data-bs-offset ویژگی تعیین می‌کند که تعداد پیکسل‌های از بالا به سمت بالا از موقعیت شروع رولینگ کجا قرار دارد. زمانی که لینک‌های ناوبری در حال جستجوی عنصرهای قابل رولینگ هستند، اگر احساس می‌کنید که وضعیت فعال زودتر تغییر کرده است، این بسیار مفید است. مقدار پیش‌فرض 10 پیکسل است.

محل‌گذاری نسبی نیاز دارندعنصرهایی که دارای ویژگی data-bs-spy="scroll" هستند، نیاز به CSS دارند position تنها با تنظیم مقادیر ویژگی به "relative"، آن‌ها به درستی کار می‌کنند.