Plugin de Afixo Bootstrap (Avançado)

O plug-in de afixação

O plugin Affix permite que um elemento seja afixado (bloqueado) em uma área da página. Isso é frequentemente usado com menus de navegação ou botões de ícones sociais, para torná-los "grudados" em uma área específica enquanto rolam para cima e para baixo na página.

O plug -in ativa e desativa esse comportamento (altera o valor de CSS positionpara static) fixed, dependendo da posição de rolagem.

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

Exemplo 2) Uma barra lateral afixada:

Com o Affix, ao rolar para cima e para baixo na página, o menu está sempre visível e travado em sua posição.

Como criar um menu de navegação afixado

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

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

Exemplo explicado

Adicione data-spy="affix"ao elemento que você deseja afixar.

Opcionalmente, adicione o data-offset-top|bottomatributo para calcular a posição da rolagem.

Como funciona

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

• O plug-in adiciona a classe .affix-topou .affix-bottompara indicar que o elemento está em sua posição superior ou inferior. O posicionamento com CSS não é necessário neste momento.


• Rolar além do elemento afixado aciona a afixação real - É aqui que o plug-in substitui a classe .affix-topou .affix-bottompela .affixclasse (sets position:fixed). Neste ponto, você deve adicionar o CSS topou bottoma propriedade para posicionar o elemento afixado na página.


• Se um deslocamento inferior for definido, rolar até ele substituirá a .affixclasse por .affix-bottom. Como os deslocamentos são opcionais, definir um requer que você defina o CSS apropriado. Neste caso, adicione position:absolutequando necessário.

No primeiro exemplo acima, o plugin Affix adiciona a .affixclasse (position:fixed) ao elemento <nav> quando rolamos 197 pixels do topo. Se você abrir o exemplo, também verá que adicionamos a toppropriedade CSS com valor 0 à .affixclasse. Isso é para garantir que a barra de navegação permaneça no topo da página o tempo todo, quando tivermos rolado 197 pixels do topo.

Scrollspy & Afixo

Usando o plugin Affix junto com o plugin Scrollspy :

Referência Completa do Afixo Bootstrap

Para obter uma referência completa de todos os métodos e eventos de afixo, acesse nossa Referência de Afixo do Bootstrap JS .