JS Affix (affix.js)
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 "pau" 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.
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.
Para mais informações, leia nossa Bootstrap Affix Tutorial .
Dica: O plugin Affix é frequentemente usado em conjunto com o Scrollspy plugin.
Via data-* Atributos
Adicionar data-spy="affix" o elemento que você quer espionar, eo data-offset-top|bottom=" number " atributo para calcular a posição do deslocamento.
Exemplo
<ul class="nav nav-pills nav-stacked" data-spy="affix"
data-offset-top="205">
Tente você mesmo " via JavaScript
Habilitar manualmente com:
apor Opções
Opções podem ser passadas através de atributos de dados ou JavaScript. Para atributos de dados, acrescentar o nome de opção para de dados, como na data-offset = "".
| Nome | Digitar | Padrão | Descrição |
|---|---|---|---|
| offset | number | object | function | 10 | Especifica o número de pixels para compensar a partir do ecrã ao calcular a posição de rolagem. Quando se utiliza um único número, o offset é adicionado para ambos os sentidos de topo e de fundo. Se você só quer controlar a parte superior ou inferior, use um objeto, como offset: {top:25} Para vários deslocamentos, use offset: {top:25, bottom:50} Dica: Use uma função de fornecer dinamicamente um offset (pode ser útil para projetos de resposta) |
| target | selector | node | element | the window object | Especifica o elemento de destino do afixo |
apor Eventos
A tabela a seguir lista os eventos Affix todos disponíveis.
| Evento | Descrição | Tente |
|---|---|---|
| affix.bs.affix | Ocorre antes posicionamento fixo é adicionado ao elemento (por exemplo, quando o .affix-top classe está prestes a ser substituído com o .affix classe) | Tente |
| affixed.bs.affix | Ocorre depois posicionamento fixo é adicionado ao elemento (por exemplo, após a .affix-top classe é substituído com o .affix classe) | Tente |
| affix-top.bs.affix | Ocorre antes que o elemento de topo retorna à sua posição original (não fixado) (por exemplo, o .affix classe está prestes a ser substituído com .affix-top ) | Tente |
| affixed-top.bs.affix | Ocorre depois o elemento superior retorna à sua posição original (não fixado) (por exemplo, o .affix classe foi substituído com .affix-top ) | Tente |
| affix-bottom.bs.affix | Ocorre antes que o elemento inferior regressa à sua posição original (não fixado) (por exemplo, o .affix classe está prestes a ser substituído com .affix-bottom ) | Tente |
| affixed-bottom.bs.affix | Ocorre depois o elemento inferior regressa à sua posição original (não fixado) (por exemplo, o .affix classe foi substituído com .affix-bottom ) | Tente |
Exemplos
navbar afixada
Criar um menu de navegação horizontal aposta:
Exemplo
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> Tente você mesmo " Usando jQuery para afixar automaticamente uma barra de navegação
Use jQuery outerHeight() método para fixar a barra de navegação após o usuário ter rolado passou um elemento especificado (<header>) :
Scrollspy & Affix
Usando o afixo plug-in juntamente com o Scrollspy plugin:
Menu horizontal (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> Tente você mesmo " Menu vertical (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills
nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body> Tente você mesmo " navbar animado no afixo
Use CSS para manipular os diferentes .affix classes:
cor de fundo Mudança e preenchimento da barra de navegação no rolo - Exemplo
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff
!important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
} Tente você mesmo " Exemplo - Slide na barra de navegação
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
} Tente você mesmo "