Bootstrap Scrollspy Plugin (pokročilý)
Zásuvný modul Scrollspy
Zásuvný modul Scrollspy se používá k automatické aktualizaci odkazů v navigačním seznamu na základě pozice posouvání.
Jak vytvořit Scrollspy
Následující příklad ukazuje, jak vytvořit scrollspy:
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>
Příklad vysvětlen
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".
Scrollspy vertikální menu
V tomto příkladu používáme vertikální navigační pilulky Bootstrapu jako nabídku:
Příklad
<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>
Kompletní Bootstrap Scrollspy Reference
Úplnou referenci o všech metodách a událostech scrollspy naleznete v naší příručce Bootstrap JS Scrollspy Reference .