Bootstrap Affix Plugin (Advanced)

O Affix Plugin

O plug-in Afixo permite que um elemento se tornar afixada (bloqueado) para uma área na página. Isso é muitas vezes usado com menus de navegação ou botões de ícones sociais, para torná-los "stick" em uma área específica durante a rolagem para cima e para baixo da página.

O plug-in alterna esse comportamento dentro e fora (altera o valor da posição CSS de estático para fixo), dependendo da posição de rolagem.

Exemplo 1) Uma barra de navegação aposta:

Exemplo 2) Uma barra lateral aposta:

Com Affix, quando se deslocar para cima e para baixo da página, o menu é sempre visível e travado na posição.

Como criar um menu de navegação Afixada

O exemplo a seguir mostra como criar um horizontal menu de navegação aposta:

O exemplo a seguir mostra como criar um menu de navegação afixada vertical:

exemplo Explicado

Adicione data-spy="affix" para o elemento que deseja aposta.

Opcionalmente, adicione a data-offset-top|bottom atributo para calcular a posição do deslocamento.

Como funciona

O afixo plug-in alterna entre três classes: .affix , .affix-top , e .affix-bottom . Cada classe representa um estado particular. Você deve adicionar as propriedades CSS para lidar com as posições reais, com excepção da position:fixed na .affix classe.

• O plugin adiciona o .affix-top ou .affix-bottom classe para indicar o elemento está em seu mais alto ou mais inferior posição. Posicionamento com CSS não é necessária neste ponto.


• De ultrapassar o elemento de aposta desencadeia a aposição real - Este é o lugar onde o plug-in substitui o .affix-top ou .affix-bottom classe com o .affix classe (conjuntos position:fixed ). Neste ponto, você deve adicionar o CSS top ou bottom propriedade para posicionar o elemento afixada na página.


• Se um fundo de compensação é definida, a rolagem passado, substitui o .affix classe com .affix-bottom . Desde offsets são opcionais, estabelecendo um requer que você defina o CSS apropriado. Neste caso, adicionar position:absolute quando necessário.

No primeiro exemplo acima, o plug-in Affix adiciona o .affix classe (posição: fixo) ao <nav> elemento quando temos rolado 197 pixels a partir do topo. Se você abrir o exemplo, você também vai ver que nós adicionamos a CSS top propriedade com um valor de 0 a .affix classe. Este é certificar-se de que a barra de navegação permanece no topo da página em todos os tempos, quando tiver rolado 197 pixels a partir do topo.

Scrollspy & Affix

Usando o afixo plug-in juntamente com o Scrollspy plugin:

Conclua Bootstrap Affix Referência

Para uma referência completa de todos apor métodos e eventos, ir ao nosso Bootstrap JS Affix Referência .