JS Scrollspy (scrollspy.js)
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.
Pentru un tutorial despre Scrollspy, citiți Bootstrap Scrollspy Tutorial .
Sfat: Scrollspy Plugin - ul este adesea utilizat împreună cu afix plugin.
Via data-* Atribute
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.
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 » Via JavaScript
Activați manual cu:
Opțiuni Scrollspy
Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atribute de date, adăugați numele opțiune pentru a datelor, la fel ca în date de offset = „“.
| Nume | Tip | Mod implicit | Descriere | Incearca-l |
|---|---|---|---|---|
| offset | number | 10 | Specifică numărul de pixeli pentru a compensa de sus atunci când calculează poziția de parcurgere | Incearca-l |
Scrollspy Metode
Următorul tabel listează toate metodele scrollspy disponibile.
| Metodă | Descriere | Incearca-l |
|---|---|---|
| . scrollspy("refresh") | Când adăugarea și eliminarea elementelor din scrollspy, această metodă poate fi utilizată pentru a actualiza documentul | Incearca-l |
Evenimente Scrollspy
Tabelul următor listează evenimente scrollspy toate disponibile.
| Eveniment | Descriere | Incearca-l |
|---|---|---|
| activate.bs.scrollspy | Apare atunci când un nou element devine activat de scrollspy | Incearca-l |
Exemple
Scrollspy cu parcurgere animat
Cum de a adăuga o pagină de parcurgere fără probleme la o ancoră pe aceeași pagină:
derulare lină
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar",
offset: 50});
// Add smooth scrolling to all links inside a navbar
$("#myNavbar a").on('click', function(event){
//
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 (the speed of the animation)
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}); Încearcă - l singur » Scrollspy & afix
Utilizarea afixul plugin împreună cu plugin - ul Scrollspy:
Meniu orizontal (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> Încearcă - l singur » Meniu vertical (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> Încearcă - l singur »