JS Scrollspy (scrollspy.js)
O plugin Scrollspy é usado para atualizar automaticamente links em uma lista de navegação baseado em posição de rolagem.
Para um tutorial sobre Scrollspy, leia nossa Scrollspy Tutorial Bootstrap .
Dica: O plugin Scrollspy é frequentemente usado em conjunto com o Affix plugin.
Via data-* Atributos
Adicione data-spy="scroll" para o elemento que deve ser usado como a área de rolagem (muitas vezes este é o <body> elemento).
Em seguida, adicione o data-target atributo com um valor do id ou o nome da classe da barra de navegação ( .navbar ). Este é certificar-se de que a navbar está ligado com a área de rolagem.
Note-se que os elementos de rolagem deve coincidir com o ID dos links dentro de itens da lista do navbar ( <div id="section1"> corresponde <a href="#section1"> ).
O opcional data-offset atributo especifica o número de pixels para compensar, de cima no cálculo da posição de rolagem. Isso é útil quando você sente que as ligações dentro da barra de navegação muda o estado ativo muito cedo ou muito cedo, quando saltar para os elementos de rolagem. O padrão é 10 pixels.
Requer posicionamento relativo: O elemento com data-spy="scroll" requer a CSS position imóvel, com um valor de "relative" para funcionar corretamente.
Exemplo
<!-- 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>
Tente você mesmo " via JavaScript
Habilitar manualmente com:
Opções Scrollspy
Opções podem ser passadas através de atributos de dados ou JavaScript. Para atributos de dados, acrescentar o nome de opção para de dados, como na data-offset = "".
| Nome | Digitar | Padrão | Descrição | Tente |
|---|---|---|---|---|
| offset | number | 10 | Especifica o número de pixels para compensar a partir de cima no cálculo da posição do rolo | Tente |
Métodos Scrollspy
A tabela seguinte lista todos os métodos scrollspy disponíveis.
| Método | Descrição | Tente |
|---|---|---|
| .scrollspy("refresh") | Quando a adição e remoção de elementos do scrollspy, este método pode ser usado para actualizar o documento | Tente |
Eventos Scrollspy
A tabela a seguir lista os eventos scrollspy todos disponíveis.
| Evento | Descrição | Tente |
|---|---|---|
| activate.bs.scrollspy | Ocorre quando um novo item é ativado pela scrollspy | Tente |
Exemplos
Scrollspy com o rolo de animação
Como adicionar um pergaminho página suave para uma âncora na mesma página:
rolagem suave
// 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;
});
}); Tente você mesmo " Scrollspy & Affix
Usando o Affix plug-in juntamente com o plugin Scrollspy:
Menu horizontal (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> Tente você mesmo " Menu 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> Tente você mesmo "