Bootstrap Scrollspy-inprop (gevorderd)
Die Scrollspy-inprop
Die Scrollspy-inprop word gebruik om skakels outomaties op te dateer in 'n navigasielys gebaseer op 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-inverse navbar-fixed-top">
...
<ul class="nav 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 pieksels.
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="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
Voltooi Bootstrap Scrollspy-verwysing
Vir 'n volledige verwysing van alle scrollspy-metodes en -geleenthede, gaan na ons Bootstrap JS Scrollspy Reference .