Archivo del código fuente:
Scrollspy.js
Implementar funciones
1. Cuando el hashkey establecido en el área de desplazamiento alcanza la posición válida, el elemento especificado en su navegación se establece en asociación.
2. La navegación debe ser .nav> li> una estructura, y el hashkey en un href o objetivo de datos debe estar vinculado al hashkey
3. Debe haber estilo .nav en el menú
4. El objetivo de datos en el área de desplazamiento debe ser consistente con la ID de navegación de los padres (debe ser el padre)
<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; desbordamiento: oculto; desbordamiento: auto; " > <h4 id="one" >ibe</h4><p>One specific content<br/>One specific content<br/>One specific content<br/>One specific content<br/></p> <h4 id="two" >two</h4><p>One specific content<br/>One specific content<br/></p> <h4 id="three" >three</h4><p>One specific content<br/>One specific contenido <br/> </p> <h4 id = "tres"> tres </h4> <p> Un contenido específico <br/> un contenido específico <br/> </p> <h4 id = "tres"> tres </h4> <p> Un contenido específico <br/> un contenido específico <br/> un contenido específico <br/> </p>
Análisis del código fuente:
1. Principio: Cuando la posición de hashkey en el contenedor de desplazamiento es solo el valor establecido por desplazamiento en la parte superior del contenedor, se establecerá el resaltado HREF correspondiente en la navegación.
2. Si el área de desplazamiento es un cuerpo, el elemento del área de desplazamiento se marcará como ventana (juzgado en el constructor)
this. $ scrollelement = $ (elemento) .is (document.body)? $ (ventana): $ (elemento)
3. Getscrolheight: obtenga la altura de contenido del contenedor de desplazamiento (incluida la parte oculta)
this. $ scrollelement [0] .scrollheight || Math.max (this. $ Body [0] .scrollheight, document.documentelement.scrollheight)
4. Actualizar: actualizar y almacenar los valores de cada hashkey en el contenedor de desplazamiento
4.1. Use Offset para obtener el valor de posicionamiento de forma predeterminada. Si el área de desplazamiento no es ventana, use la posición para obtenerla.
if (! $. iswindow (this. $ scrollelement [0])) {offsetMethod = 'posicion' offsetBase = this. $ scrollelement.scrolltop () // Obtenga la altura base, si hay contenido en el área de desplazamiento que no participa en el cálculo de scroll}4.2. Según el hashkey en la navegación, transversal y obtenga el valor de desplazamiento correspondiente al hashkey en el área de desplazamiento:
this. $ Body .find (this.selector) .map (function () {var $ el = $ (this) var href = $ el.data ('target') || $ el.attr ('href') var $ href = /^#./.test(href) && $ (href) // obtiene el elemento correspondiente a la tecla de hastre en el área de scrolling ($ href ($ href y ($ href y $ href.length && $ href.is (': visible') && [$ href [offsetMethod] (). top + offsetBase, href]]) || que.targets.push (this [1])})5. Proceso: la función de activación de eventos de ScrollBar se utiliza para calcular qué menú de navegación debe resaltarse actualmente
5.1. Obtenga la distancia de desplazamiento del contenedor de desplazamiento:
var scrollTop = this. $ scrollelement.scrolltop () + this.options.offset
5.2. La altura máxima que puede rodar el contenedor rodante
// Altura máxima de desplazable = Distancia de ajuste de desplazamiento (desplazamiento) + Altura del contenido del contenedor de desplazamiento - Altura de configuración del contenedor de desplazamiento var maxscroll = this.options.offset + scrollheight - this. $ Scrollelement.height ()
5.3. Establecer la lógica del elemento de desplazamiento:
for (i = offsets.length; i--;) {//Transfer all offset activeTarget != targets[i] //Judge whether the current target is equal to activeTarget && scrollTop >= offsets[i] //Scroll height> offset && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1]) //The i + 1 element does not exist, or the El elemento i+1 no es mayor que la altura de desplazamiento && this.Activate (objetivos [i]) // establecer I como el elemento activo actual}6. Activo: configure el menú de navegación especificado para resaltar
7. Claro: claro todos los menús resaltados
El artículo anterior que discute brevemente el análisis del código fuente Bootstrap ScrollSpy (desplazamiento de la escucha) es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.