Afixo é um controle útil no Bootstrap, que pode monitorar a posição da barra de rolagem do navegador e manter sua navegação na área visível da página o tempo todo. No início, a navegação era um layout normal de streaming na página, ocupando uma posição fixa no documento. Quando a página rolada, a navegação se tornou automaticamente um layout fixo (fixo), sempre na área de visualização do usuário. Vamos falar sobre seu uso. Primeiro, vamos dar uma olhada em seu princípio de implementação. É alcançado modificando os atributos de classe dos elementos da página em tempo real
No início, o atributo Affxi-top será adicionado automaticamente à classe do elemento que aplica afixar.
Quando a barra de rolagem rola para que a navegação esteja prestes a chegar ao topo da página, o top de afixas será alterado para afixar na classe do elemento.
Ao arrastar a barra de rolagem para a parte inferior da página, o afixo mudará automaticamente para o Afix-Bottom novamente
O processo acima é completamente implementado pelo próprio controle e não precisamos intervir. Só precisamos escrever o CSS nesses estados.
Se pudermos definir
.fafix-top {top: 150px;}. Afixo {top: 20px; // Os sites geralmente construídos com bootstrap têm uma barra de navegação na cabeça} .affix-bottom {…}Vamos dar uma olhada em como é usado
1. Passe o atributo de dados
Você só precisa adicionar data-spy = "afix" ao elemento da página que você precisa ouvir. Em seguida, use compensações para determinar e desativar o elemento.
<ul data-spy = "afix" Data-offset-top = "190"> <li> <a href = "#one"> tutorial </a> </li> <li> <a href = "#dois"> tutorial tutorial </a> </li> <li> <a href = "#três"> tutorial três </a>
Onde o Data-O-Offset-top é a posição em que o elemento de estado de topo de afixação está localizado na parte superior da página. Ao rolar para o topo da página, podemos definir o estilo ".ffix" para redefinir seu valor "superior".
2. Chamando através do JavaScript
O código de amostra é o seguinte:
$ ('#mynav'). Afixo ({offset: {top: 100, // A posição da parte superior da página na rolagem é inferior: function () {// a posição da parte inferior da página quando a rolagem é concluída retorna (this.bottom = $ ('.O código HTML é o seguinte (apenas o código principal é exibido):
<ul id = "mynav"> <li> <a href = "#one"> tutorial </a> </li> <li> <a href = "#dois"> tutorial dois </a> </li> <li> <a href = "#três"> tutorial Three </a> </li> </ul> <d>
O exposto acima parece ter introduzido o uso do afixo no bootstrap, mas no processo de uso real, descobriremos que, ao arrastar a barra de rolagem, a largura dos elementos da página usando o afixo mudará, resultando em um layout de página confuso. Portanto, é melhor anotar sua largura no CSS que define afixo, como:
.fafix {width: 250px;}Dessa forma, não há problema quando a janela é grande o suficiente, mas quando você arrasta e altera o tamanho da janela, você descobrirá que o layout está confuso novamente. Esse problema me incomodou há muito tempo. Por fim, analisando o código-fonte do BOOTCSS, descobri que o site adicionou atributos "Hidden-Print", "Hidden-xs", "Hidden-SM" para todas as classes que usam elementos de afixos. É usado para ocultar quando a tela não atende aos requisitos. Embora afete a facilidade de uso, garante que o layout seja arrumado em qualquer caso.
O exposto acima é uma explicação detalhada do uso de controles de afixo no bootstrap e a maneira de manter o belo layout. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!