Plugin Bootstrap Scrollspy (Avançado)
O plugin ScrollSpy
O plugin Scrollspy é usado para atualizar automaticamente os links em uma lista de navegação com base na 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>
Exemplo explicado
Adicione data-spy="scroll"ao elemento que deve ser usado como área de rolagem (geralmente esse é o <body>elemento).
Em seguida, adicione o data-targetatributo com um valor do id ou o nome da classe da barra de navegação ( .navbar). Isso é para garantir que a barra de navegação esteja conectada à área rolável.
Observe que os elementos roláveis devem corresponder ao ID dos links dentro dos itens da lista da barra de navegação ( <div id="section1">matches <a href="#section1">).
O atributo opcional data-offsetespecifica o número de pixels a serem deslocados do topo ao calcular a posição de rolagem. Isso é útil quando você sente que os links dentro da barra de navegação alteram o estado ativo muito cedo ou muito cedo ao pular para os elementos roláveis. O padrão é 10 pixels.
Requer posicionamento relativo: O elemento com data-spy="scroll" requer a propriedade position CSS , com um valor de "relative" para funcionar corretamente.
Menu Vertical Scrollspy
Neste exemplo, usamos as pílulas de navegação vertical do Bootstrap como 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>
Referência completa do Bootstrap Scrollspy
Para uma referência completa de todos os métodos e eventos do scrollspy, acesse nossa Referência do Bootstrap JS Scrollspy .