Bootstrap JS Scrollspy
JS Scrollspy (scrollspy.js)
Die Scrollspy-inprop word gebruik om skakels outomaties op te dateer in 'n navigasielys gebaseer op rolposisie.
Vir 'n tutoriaal oor Scrollspy, lees ons Bootstrap Scrollspy-tutoriaal .
Wenk: Die Scrollspy-inprop word dikwels saam met die Affix - inprop gebruik.
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-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>
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 | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
Scrollspy Events
Die volgende tabel lys alle beskikbare scrollspy-geleenthede.
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |
Meer voorbeelde
Scrollspy met geanimeerde blaai
Hoe om 'n gladde bladsyrol by 'n anker op dieselfde bladsy te voeg:
Gladde blaai
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
Scrollspy & Plak
Gebruik die Affix -inprop saam met die Scrollspy-inprop:
Horisontale spyskaart (navigasiebalk)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Vertikale spyskaart (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>