Scrollspy Plugin
Scrollspy plugin este utilizat pentru a actualiza în mod automat link-uri dintr-o listă de navigare în funcție de poziția de parcurgere.
Cum Pentru a crea un Scrollspy
Următorul exemplu arată cum să creați un scrollspy:
Exemplu
<!-- 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> Încearcă - l singur » exemplu explicat
Adăugați data-spy="scroll" la elementul pe care ar trebui să fie utilizat ca zona derulabilă (often this is the <body> element) de (often this is the <body> element) .
Apoi adăugați data-target atribut cu o valoare de id - ul sau numele clasei a barei de navigare ( .navbar ) . Acest lucru este să vă asigurați că navbar este conectat cu zona derulabil.
Rețineți că elementele scrollable trebuie să se potrivească cu ID - ul și linkurile din elementele listei navbar lui ( <div id="section1"> matches <a href="#section1"> ) se ( <div id="section1"> matches <a href="#section1"> ) .
Opțional data-offset de data-offset atribut specifică numărul de pixeli pentru a compensa de sus la calcularea poziției de parcurgere. Acest lucru este util atunci când simțiți că link-urile din interiorul navbar schimbă starea activă prea devreme sau prea devreme, atunci când sari la elementele scrollable. Implicit este de 10 pixeli.
Necesită poziționare relativă: Elementul cu data-spy="scroll" cere CSS position de proprietate, cu o valoare de "relative" pentru a funcționa corect.
Meniu Scrollspy Vertical
În acest exemplu, vom folosi pastile de navigare verticale Bootstrap ca meniu:
Exemplu
<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> Încearcă - l singur » Finalizarea Bootstrap Scrollspy de referință
Pentru o referință completă a tuturor metodelor și evenimentelor scrollspy, du - te la nostru Bootstrap JS Scrollspy de referință .