Scrollspy برای هدایت به بخش های مختلف در صفحه ساخته می شود. ، فهرست مطالبی که در زیر قرار میگیرد نمونه ای از Scrollspy است.
پیشنهاد می شود قبل از ورود به این بخش ، سایر بخش های دوره رایگان بوت استرپ را مطالعه فرمایید.
ساخت Scrollspy
قطعه کد زیر نمونه ای از یک Scrollspy را نشان می دهد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- 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 افزوده می شود .
توجه داشته باشید که عناصر پیمایشی باید با شناسه پیوندهای موجود در داخل لیست های navbar مطابقت داشته باشند (< div id = ” section1 ” > با < a href=” #section1″ > مطابقت دارد).
ویژگی data-offset اختیاری است ، تعداد پیکسل هایی را که برای جابجایی از بالا هنگام محاسبه موقعیت پیمایش ، مشخص می کند. این امر هنگامی مفید است که احساس می کنید هنگام پرش به سمت عناصر قابل پیمایش ، پیوندهای داخل نوار حالت فعال را خیلی زود تغییر می دهد. پیش فرض فاصله از بالا 10 پیکسل است.
منوی عمودی Scrollspy
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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> |
پیشنهاد می شود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.
