O Scrollspy Plugin
O plugin Scrollspy é usado para atualizar automaticamente links em uma lista de navegação baseado em posição de rolagem.
Como criar um Scrollspy
O exemplo a seguir mostra como criar um scrollspy:
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 " exemplo Explicado
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 barra de navegação 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.
Menu de Scrollspy Vertical
Neste exemplo, usamos pílulas navegação vertical do Bootstrap como o menu:
Exemplo
<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> Tente você mesmo " Conclua Bootstrap Scrollspy Referência
Para uma referência completa de todos os métodos e eventos scrollspy, vá ao nosso Bootstrap JS Scrollspy Referência .