Bootstrap JS Scrollspy
JS Scrollspy (scrollspy.js)
Zásuvný modul Scrollspy se používá k automatické aktualizaci odkazů v navigačním seznamu na základě pozice posouvání.
Výukový program o Scrollspy najdete v našem výukovém programu Bootstrap Scrollspy .
Tip: Plugin Scrollspy se často používá společně s pluginem Affix .
Přes data-* Atributy
Přidejte data-spy="scroll"k prvku, který by měl být použit jako rolovatelná oblast (často je to <body>prvek).
Poté přidejte data-targetatribut s hodnotou id nebo názvem třídy navigační lišty ( .navbar). Je to proto, abyste se ujistili, že je navigační lišta spojena s posouvatelnou oblastí.
Všimněte si, že rolovatelné prvky se musí shodovat s ID odkazů v položkách seznamu navigační lišty ( <div id="section1">shody <a href="#section1">).
Nepovinný data-offsetatribut určuje počet pixelů, které se mají odsadit shora při výpočtu polohy posunu. To je užitečné, když máte pocit, že odkazy uvnitř navbaru mění aktivní stav příliš brzy nebo příliš brzy při přeskakování na rolovatelné prvky. Výchozí hodnota je 10 pixelů.
Vyžaduje relativní umístění: Prvek s data-spy="scroll" vyžaduje pro správnou funkci vlastnost CSS position s hodnotou "relative".
Příklad
<!-- 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>
Prostřednictvím JavaScriptu
Povolit ručně pomocí:
Příklad
$('body').scrollspy({target: ".navbar"})
Scrollspy Možnosti
Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U datových atributů připojte název volby k data-, jako v 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 metody
V následující tabulce jsou uvedeny všechny dostupné metody scrollspy.
| Method | Description | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
Scrollspy události
V následující tabulce jsou uvedeny všechny dostupné události scrollspy.
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |
Další příklady
Scrollspy s animovaným svitkem
Jak přidat plynulý posun stránky do kotvy na stejné stránce:
Plynulé rolování
// 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 & Affix
Použití pluginu Affix spolu s pluginem Scrollspy:
Horizontální nabídka (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Vertikální nabídka (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>