اسکرول اسپای (Scrollspy)
اسکرول اسپای یک «ردیاب اسکرول» است. یعنی لینک های منو را با موقعیت اسکرول هماهنگ می کند. مثل فهرست درس که با حرکت پایین، عنوان فعلی هایلایت می شود.
ساخت اسکرول اسپای
ویژگی data-bs-spy="scroll" را روی بخش قابل اسکرول بگذار. سپس با data-bs-target منو را به همان بخش وصل کن. همچنین می توانی با data-bs-offset فاصله محاسبه را تنظیم کنی.
<!-- ناحیه قابل اسکرول -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- نوار ناوبری: لینک ها به سکشن ها می پرند -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<!-- سکشن 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-bs-spy دارد باید position: relative داشته باشد تا درست کار کند.
همچنین، شناسه سکشن ها باید با href لینک ها یکی باشد. مثلا <div id="section1"> با <a href="#section1"> جفت است.
گام های عملی سریع
- روی بخش اسکرول،
data-bs-spy="scroll"بگذار. - با
data-bs-targetمنو را متصل کن. - شناسه سکشن ها را با لینک ها برابر کن.
- در صورت نیاز،
data-bs-offsetرا تنظیم کن.
جمع بندی سریع
- هایلایت منو با اسکرول هماهنگ می شود.
data-bs-spyرا روی بخش اسکرول بگذار.- شناسه ها باید با لینک ها یکی باشند.
position: relativeرا فراموش نکن.
مطالب مرتبط: اسکرول اسپای در ناوبری، منوی خارج کادر (Offcanvas).