Exemplo com navbar
Exemplo com nav aninhada
Exemplo com grupo de lista
IDs alvos válidos são obrigatórios
Elementos alvos invisíveis (sem :visible) são ignorados
Automaticamente, atualize componentes de navegação ou grupo de listas, baseando-se na área visível do site, para indicar qual link está ativo na viewport, no momento.
O scrollspy tem algumas exigências para funcionar direito:
Se você está montando nosso JavaScript a partir da fonte, precisará do util.js;
Este componente deve ser usado em um componente nav ou grupo de lista;
Scrollspy pede que tenha position: relative; no elemento que você está espiando a área visível (normalmente, é o <body>);
Quando espiando elementos que não sejam o <body>, se assegure de ter declarado height e overflow-y: scroll;;
É preciso usar âncoras (<a>), as quais devem referenciar o elemento, com o id especificado.
Quando implementado com sucesso, sua nav ou grupo de lista vai se atualizar de acordo com a área visível, movendo a classe .active de um item para o outro.
Role a área abaixo do navbar e veja a classe .active mudar de elemento. Os itens dropdown vão ser destacados, de acordo com a área visível, também.
<a class="dropdown-item" href="#tres">tres</a>
<div data-spy="scroll" data-target="#navbar-exemplo2" data-offset="0">
<h4 id="tres">tres</h4>
Scrollspy também funciona com .navs aninhados. Se um .nav está ativo, seu pai também estará ativado. Role pela a área próximo ao navbar e veja a classe .active ser alterada.
Navbar Item 1 Item 1.1 Item 1.2 Item 2 Item 3 Item 3.1 Item 3.2
<nav id="navbar-exemplo3" class="navbar navbar-light bg-light">
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1.1</a>
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1.2</a>
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3.1</a>
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3.2</a>
<div data-spy="scroll" data-target="#navbar-exemplo3" data-offset="0">
<h5 id="item-1-1">Item 1.1</h5>
<h5 id="item-1-2">Item 2.2</h5>
<h5 id="item-3-1">Item 3.1</h5>
<h5 id="item-3-2">Item 3.2</h5>
O Scrollspy também funciona com .list-group. Role na área próxima ao grupo de lista e veja a classe ativa mudar.
Para implementar o comportamento scrollspy na sua navegação superior, facilmente, coloque data-spy="scroll" no elemento que você quer espiar a área visível (o <body>, normalmente). Depois, coloque o atributo data-target com o ID ou classe do elemento pai de qualquer componente Bootstrap .nav.
<body data-spy="scroll" data-target="#navbar-exemplo">
<div id="navbar-exemplo">
Depois de adicionar position: relative; em seu CSS, invoque o scrollspy, assim:
$('body').scrollspy({ target: '#navbar-exemplo' })
Links do navbar devem ter IDs alvos válidos. Por exemplo, um <a href="#home">home</a> deve remeter a algo no DOM como <div id="home"></div>.
Elementos alvos que não não são considerados visíveis pelo jQuery vão ser ignorados e seus itens nav, correspondentes, serão destacados.
Quando usando scrollspy, ao mesmo tempo que adiciona ou remove elementos do DOM, você precisará invocar o método refresh, de tal forma:
Destrói o scrollspy vinculado a um elemento.
Parâmetros podem ser passados via atributos data ou JavaScript. No caso de atributos data, anexe o nome do parâmetro ao prefixo data-, como em data-offset="".
offset number 10 Pixels para deslocar, a partir do topo, quando calculando a posição do scroll.
activate.bs.scrollspy Este evento é acionado no elemento de rolagem, quando um item se torna ativado pelo scrollspy.