introdução
Ao escrever um blog, muitas legendas são frequentemente usadas para a organização. Quando o artigo é longo, você precisa transportar entre diferentes títulos. Se você adicionar manualmente um diretório e adicionar um ponto de ancoragem, é realmente problemático. Por esse motivo, você pode gerar dinamicamente uma área de diretório e usar o plug-in de afixo fornecido pelo Bootstrap para corrigir a área de diretório na página. A documentação do bootstrap usa
Preparação - Introdução ao bootstrap.min.js
Coloque o bootstrap.min.js na etiqueta do script antes do corpo, e o uikit.min.js não serão introduzidos por enquanto.
Após a introdução de plug-ins relacionados, nossa idéia é primeiro gerar automaticamente pontos de ancoragem e conteúdo de menu com base no artigo, depois adicionar afixar a ele para produzir um efeito fixo e, em seguida, usar o plug-in scrollspy do UIKIT (também há rollspy no bootstrap e o método de uso é quase o mesmo).
Introduce-Learning o uso de afixo
O plug-in de afix nos ajuda a corrigir a posição da peça de navegação e adicionar compensações verticais aos elementos fixos de acordo com a situação de rolagem do usuário, para que o NAV mude entre três classes:
1.fix-top: indica no topo
2.fix: significa rolar na página, adicionar atributos fixos e usar compensações personalizadas
3.Fix-Bottom: significa alcançar o fundo
Para ativar o afixo, requer apenas o seguinte código:
$ ('#NAV'). Afixo ({offset: {top: $ ('cabeçalho'). Offset (). Top, inferior: ($ ('rodapé'). OuterHeight (true) + $ ('. Application'). OuterHeight (true)) + 40}});1. Organizar peças de código HTML
<ul id = "mysidebar"> </ul>
Certifique -se de adicionar aulas de navegação e afixar para a UL.
2. Gere código de encapsulamento
Apresente este snippet de código em seu próprio script script
; $. $ list.eq (i) .text (); this.append (afixValue);
O princípio do código acima é passar em uma tag ou classe que precisa ser considerada uma unidade de título para a função CreateAffix e adicionar links de âncora a ele durante o processo de travessia.
3. Como usar
Escrevendo peças HTML
<ul id = "mysidebar"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node3"> </a> </li> </li> <h3 od = "#node3"> </a> </li> </ul> 2 </h3> <h3 id = "node3"> título 3 </h3>
Escrevendo seção JavaScript
$ (function () {$ ('#mysidebar'). createAffix ('h3'); // indica que, no artigo, a tag `h3` precisa ser adicionada à âncora.});Resolva o problema do deslocamento do ponto de ancoragem
Como o ponto de ancoragem muda a página para a parte superior do elemento âncora por padrão, ou seja, se fizermos a operação acima no título 1, quando clicarmos no ponto de ancoragem, a página mudará para a posição superior em que o 'Título 1' está localizado. Se houver uma barra de menus na parte superior, ela será bloqueada e resolvida definindo o estilo CSS.
.class { /* Adicionando preenchimento pode fazer com que a âncora mude o num PX para baixo, ou seja, pule a altura da barra de menus. Compensar a parte em branco causada pelo top de preenchimento, definindo o margin-top para um valor negativo*/ top de preenchimento: num px; Margin -top: -num px;}Adicione a escuta de rolagem
Atualmente, nossa documentação DOM é assim.
<ul id = "mysidebar"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node3"> </a> </li> <li>
Processe -o, introduza o atributo uikit e verifique o documento para obter detalhes
<ul id = "mysidebar" dados-uk-scrollspy-nav = "{mais próximo: 'li', smoothscrool: true}"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li>Apresente uikit.min.js
Como o nosso item de menu (LI) é executado após o carregamento do documento, se o scrollspy do UIKIT for executado antes que o item do menu seja gerado, ele definitivamente não funcionará. Portanto, precisamos introduzir o uikit.min.js após o item de menu ser gerado. O código é o seguinte:
$ (function () {$ ('#MySideBar'). CreateAffix ('h3'); // gerar menu $ .getScript ("uikit.min.js"); // carregar uikit.minmin.js assíncronos, e o monitoramento de rolagem é o efeito.});