introducción
Al escribir un blog, a menudo se usan muchos subtítulos para la organización. Cuando el artículo es largo, debe transmitir de un lado a otro entre diferentes títulos. Si agrega manualmente un directorio y agrega un punto de anclaje, es realmente problemático. Por esta razón, puede generar dinámicamente un área de directorio y usar el complemento Aftix proporcionado por Bootstrap para corregir el área de directorio en la página. La documentación de Bootstrap lo usa
Preparación - Introducción de bootstrap.min.js
Ponga bootstrap.min.js en la etiqueta de script antes del cuerpo, y uikit.min.js no se introducirá por el momento.
Después de introducir complementos relacionados, nuestra idea es generar primero automáticamente los puntos de anclaje y el contenido de menú en función del artículo, luego agregarle el afijo para producir un efecto fijo y luego usar el complemento ScrollSpy de UIKIT (también hay ScrollSpy en Bootstrap, y el método de uso es casi el mismo).
Introducir aprendizaje del uso de Affix
El complemento Aftix nos ayuda a arreglar la posición de la parte de navegación y agregar compensaciones verticales a los elementos fijos de acuerdo con la situación de desplazamiento del usuario, de modo que el NAV cambia entre tres clases:
1.Affix-top: indica en la parte superior
2.Affix: significa desplazarse en la página, agregar atributos fijos y usar compensaciones personalizadas
3.-Bottom: significa llegar a la parte inferior
Para habilitar Affix solo requiere el siguiente código:
$ ('#nav'). Affix ({offset: {top: $ ('header'). offset (). superior, fondo: ($ ('pie'). outerHeight (true) + $ ('. Application'). OuterHeight (True)) + 40}});1. Organizar piezas de código HTML
<ul id = "mysidebar"> </ul>
Asegúrese de agregar clases NAV y Afix para UL.
2. Generar código de encapsulación
Presente este fragmento de código en su propio script script
n. $ list.eq (i) .Text (); } this.append (AffiXValue);
El principio del código anterior es pasar en una etiqueta o clase que debe considerarse una unidad de título para la función Createffix, y agregarle enlaces de anclaje durante el proceso transversal.
3. Cómo usar
Escribir piezas HTML
<ul id = "mysidebar"> <li> <a href = "#nodo1"> </a> </li> <li> <a href = "#nodo2"> </a> </li> <li> <a href = "#nodo3"> </a> </li> </ul> <h3 id = "node1"> title 1 </h3> <h3 Id. 2 </h3> <h3 id = "node3"> Título 3 </h3>
Escribir la sección de JavaScript
$ (function () {$ ('#mysidebar'). Createffix ('H3'); // indica que en el artículo, la etiqueta `H3` debe agregarse al ancla.});Resuelva el problema del desplazamiento del punto de anclaje
Debido a que el punto de anclaje cambia la página a la parte superior del elemento de anclaje de forma predeterminada, es decir, si hacemos la operación anterior en el Título 1, cuando hacemos clic en el punto de anclaje, la página cambiará a la posición superior donde se encuentra 'Título 1'. Si hay una barra de menú en la parte superior, se bloqueará y se resolverá configurando el estilo CSS.
.class { /* Agregar relleno puede hacer que el ancla cambie num px hacia abajo, es decir, omita la altura de la barra de menú. Prepare la parte en blanco causada por la cima del acolchado estableciendo el margen de margen a un valor negativo*/ relleno: num px; margen -top: -num px;}Agregar escucha de desplazamiento
Actualmente nuestra documentación DOM es así.
<ul id = "mysidebar"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node3"> </a> </li> </ul> </ul>
Procesarlo, introducir el atributo UIKIT y verificar el documento para más detalles
<ul id="mysidebar" data-uk-scrollspy-nav="{closest:'li',smoothscrool:true}" ><li><a href="#node1"></a></li><li><a href="#node2"></a></li><li><a href="#node3"></a></li></ul>Presente a uikit.min.js
Dado que nuestro elemento de menú (Li) se ejecuta después de cargar el documento, si el ScrollSpy de UIKIT se ejecuta antes de generar el elemento del menú, definitivamente no funcionará. Por lo tanto, necesitamos introducir uikit.min.js después de que se genera el elemento del menú. El código es el siguiente:
$ (function () {$ ('#mysideBar'). Createffix ('H3'); // Generar menú $ .getScript ("uikit.min.js"); // cargar uikit.min.js asincrónicamente, y el monitoreo de desplazamiento se ve en efecto.});