ورود به کارتابل مشتریان وب مهراز
Scrollspy در Bootstrap ورژن 4
یادگیری BootstrapScrollspy به طور خودکار لینک ها را در یک لیست منو بر اساس موقعیت اسکرول بروزرسانی می کند.
چگونه Scrollspy ایجاد کنیم
مثال زیر نشان می دهد چگونه scrollspy ایجاد می شود:
<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body> مثال توضیح داده شده
data spy = "scroll" را به عنصری که باید به عنوان ناحیه رونده استفاده شود (اغلب این عنصر <body>) است اضافه کنید
سپس خصیصه data-target را با مقدار شناسه یا نام کلاس نوار منو navbar اضافه کنید.
توجه داشته باشید که عناصر اسکرول دار باید با شناسه لینک های موجود در لیست ها مطابقت داشته باشند " برابر="" <a="" href=""#section1">).
ویژگی اختیاری data-offset مشخص کننده تعداد پیکسل ها است که در هنگام محاسبه موقعیت اسکرو از بازگشت به بالا استفاده می شود. برای این است هنگامی که شما احساس می کنید که لینک در داخل نوار ناوبری تغییر حالت های فعال خیلی زود یا خیلی زود هنگام پریدن به عناصر رونده. پیش فرض 10 پیکسل است
نیاز به موقعیت نسبی: عنصر با data-spy = "scroll" نیاز به ویژگی position در CSS دارد، با مقدار "relative" به درستی کار می کند.
منوی عمودی Scrollspy
در این مثال، ما از pill های ناوبری عمودی Bootstrap به عنوان منو استفاده می کنیم:
<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>
نظر شما
>