Bootstrap 4 Scrollspy (Gevorderd)
Bootstrap 4 Scrollspy
Scrollspy word gebruik om skakels in 'n navigasielys outomaties op te dateer op grond van rolposisie .
Hoe om 'n Scrollspy te skep
Die volgende voorbeeld wys hoe om 'n scrollspy te skep:
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><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>
Voorbeeld Verduidelik
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.
Scrollspy Vertical Menu
In hierdie voorbeeld gebruik ons Bootstrap se vertikale navigasiepille as spyskaart:
Voorbeeld
<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>
Voltooi Bootstrap Scrollspy-verwysing
Vir 'n volledige verwysing van alle scrollspy opsies, metodes en gebeure, gaan na ons Bootstrap JS Scrollspy Reference .