Arquivo de código -fonte:
Scrollspy.js
Implementar funções
1. Quando o hashkey definido na área de rolagem atinge a posição válida, o item especificado em sua navegação é definido em associação.
2. A navegação deve ser .nav> li> uma estrutura, e o hashkey em um href ou alvo de dados deve estar ligado ao hashkey
3. Deve haver estilo .nav no menu
4. O alvo de dados na área de rolagem deve ser consistente com o ID do pai da navegação (deve ser o pai)
<div id="selector"> <ul> <li><a href="#one">one</a> </li> <li><a href="#two">two</a> </li> <li><a href="#three">three</a> </li> </ul></div><div data-spy="scroll" data-target="#selector" style="height:100px; Overflow: Hidden; Overflow-y: Auto; " > <h4 id = "One"> ibe </h4> <p> Um conteúdo específico <br/> um conteúdo específico <br/> Um conteúdo específico <br/> Um conteúdo específico <br/> </p> <h4 id = "dois"> </h4> <p> um conteúdo específico <br/> um conteúdo específico <br/b <br> </p> <h4> "" três <b> um conteúdo específico <br/> um conteúdo específico <br/b <br> </p> <h4> "" três <b> "> um conteúdo específico <br/> <br/b <br> </p> <h4>" "" Conteúdo <br/> </p> <h4 id = "três"> três </h4> <p> Um conteúdo específico <br/> Um conteúdo específico <br/> </p> <h4 id = "três"> três </h4> <p> um conteúdo específico <br/> um conteúdo específico <br/> um conteúdo específico <br/s> </p>
Análise de código -fonte:
1. Princípio: Quando a posição de hashkey no contêiner de rolagem é apenas o valor definido pelo deslocamento na parte superior do contêiner, o destaque do HREF correspondente na navegação será definido.
2. Se a área de rolagem for um corpo, o elemento da área de rolagem será marcado como janela (julgada no construtor)
isto. $ scrolLelement = $ (elemento) .is (document.body)? $ (janela): $ (elemento)
3. GetScrolHeight: Obtenha a altura do conteúdo do recipiente de rolagem (incluindo a parte oculta)
isto. $ scrolLelement [0] .ScrolHeight || Math.max (this.
4. Atualizar: Atualizar e armazenar os valores de cada hashkey no recipiente de rolagem
4.1. Use deslocamento para obter o valor de posicionamento por padrão. Se a área de rolagem não for janela, use a posição para obtê -la.
if (! $. iswindow (this.
4.2. De acordo com o Hashkey na navegação, Traversal e obtenha o valor de deslocamento correspondente ao hashkey na área de rolagem:
this. $ href.length && $ href.is (': visível') && [$ href [offsetMethod] (). top + offsetBase, href]]) || null}). that.targets.push (este [1])})5. Processo: a função de gatilho do evento de scrollbar é usada para calcular qual menu de navegação precisa ser destacado atualmente
5.1. Obtenha a distância de rolagem do recipiente de rolagem:
var scrolltop = this. $ scrollelement.Scrolltop () + this.options.offset
5.2. A altura máxima que o recipiente de rolamento pode rolar
// altura rolável máxima = distância de configuração de rolagem (deslocamento) + rolagem de conteúdo de contêiner Altura - rolagem altura da configuração do recipiente var
5.3. Definir lógica do elemento de rolagem:
para (i = desligamentos.length; i--;) {// transfira todo o deslocamento ActiveTarget! = Targets [i] // julga se o alvo atual é igual ao ActiveTarget && scrolltop> = desligamentos [i] // scroll altura> Offsets && (OFSETS [i + 1] === MELLSTROLOT | i+1 elemento não é maior que a altura de rolagem && this.activate (alvos [i]) // Definir I como o item ativo atual}6. Ativo: defina o menu de navegação especificado para destacar
7. Clear: Limpar todos os menus destacados
O artigo acima discutindo brevemente a análise do código -fonte Scrollspy (rolagem de rolagem) é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.