Bootstrap JS Scrollspy
JS Scrollspy
Scrollspy word gebruik om skakels in 'n navigasielys outomaties op te dateer op grond van rolposisie.
Vir 'n tutoriaal oor Scrollspy, lees ons Bootstrap Scrollspy-tutoriaal .
Via data-* Kenmerke
Voeg data-spy="scroll"by die element wat as die blaaibare area gebruik moet word (dikwels is dit die <body>element).
Voeg dan die data-targetkenmerk by met 'n waarde van die id of die klasnaam van die navigasiebalk ( .navbar). Dit is om seker te maak dat die navigasiebalk gekoppel is aan die blaaibare area.
Let daarop dat rolbare elemente moet ooreenstem met die ID van die skakels binne die navigasiebalk se lysitems ( <div id="section1">pas by <a href="#section1">).
Die opsionele data-offseteienskap spesifiseer die aantal pixels wat van bo af verreken moet word wanneer die posisie van rolberekening bereken word. Dit is nuttig wanneer jy voel dat die skakels binne die navigasiebalk die aktiewe toestand te gou of te vroeg verander wanneer jy na die blaaibare elemente spring. Verstek is 10 pixels.
Vereis relatiewe posisionering: Die element met data-spy="scroll" vereis die CSS- posisie - eienskap, met 'n waarde van "relatief" om behoorlik te werk.
Voorbeeld
<!-- 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 class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
....
</ul>
</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>
Via JavaScript
Aktiveer handmatig met:
Voorbeeld
$('body').scrollspy({target: ".navbar"})
Scrollspy-opsies
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-offset="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
Scrollspy-metodes
Die volgende tabel lys alle beskikbare scrollspy-metodes.
| Method | Description |
|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
| .scrollspy("dispose") | Destroys the scrollspy |
Scrollspy Events
Die volgende tabel lys alle beskikbare scrollspy-geleenthede.
| Event | Description |
|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |