Affix es un control útil en Bootstrap, que puede monitorear la posición de la barra de desplazamiento del navegador y mantener su navegación en el área visible de la página en todo momento. Al principio, la navegación era un diseño de transmisión normal en la página, ocupando una posición fija en el documento. Cuando la página se desplazó, la navegación se convirtió automáticamente en un diseño fijo (fijo), siempre en el área de visualización del usuario. Hablemos de su uso. Primero, echemos un vistazo a su principio de implementación. Se logra modificando los atributos de clase de los elementos de página en tiempo real
Al principio, el atributo Affxi-top se agregará automáticamente a la clase del elemento que aplica Aftix.
Cuando la barra de desplazamiento se desplaza para que la navegación esté a punto de llegar a la parte superior de la página, la top de afijo se cambiará para fijar en la clase del elemento.
Al arrastrar la barra de desplazamiento a la parte inferior de la página, Affix cambiará automáticamente a fondo de Afijos nuevamente
El proceso anterior es implementado por completo por el control en sí, y no necesitamos intervenir. Solo necesitamos escribir el CSS en estos estados.
Si podemos configurar
.Affix-top {top: 150px;}. Affix {top: 20px; // Los sitios web generalmente construidos con bootstrap tienen una barra de navegación en la cabeza} .Affix-Bottom {…}Echemos un vistazo a cómo se usa
1. Pase el atributo de datos
Solo necesita agregar Data-Spy = "Affix" al elemento de página que necesita escuchar. Luego use compensaciones para determinar el encendido y apago de un elemento.
<ul data-spy = "Affix" data offset-top = "190"> <li> <a href = "##one"> tutorial one </a> </li> <li> <a href = "#dos"> tutorial dos </a> </li> <li> <a href = "#tres"> tutorial tres </a> </li> </ul>
Donde DataS-Offset-top es la posición donde el elemento de estado de adjudicación se encuentra desde la parte superior de la página. Al desplazarnos a la parte superior de la página, podemos establecer el estilo ".Affix" para restablecer su valor "superior".
2. Llamar a través de JavaScript
El código de muestra es el siguiente:
$ ('##mynav'). Affix ({offset: {top: 100, // La posición desde la parte superior de la página en desplazamiento es inferior: function () {// la posición desde la parte inferior de la página cuando el desplazamiento se completa devuelve (this.bottom = $ ('. bs-footer'). oUterheight (true))}}))El código HTML es el siguiente (solo se muestra el código central):
<ul id = "mynav"> <li> <a href = "#un"> tutorial one </a> </li> <li> <a href = "#dos"> tutorial dos </a> </li> <li> <a href = "#tres"> tutorial tres </a> </li> </ul> ... <div> </iv>
Lo anterior parece haber introducido el uso de Affix en Bootstrap, pero en el proceso de uso real, encontraremos que al arrastrar la barra de desplazamiento, el ancho de los elementos de la página usando Affix cambiará, lo que dará como resultado un diseño de página desordenado. Por lo tanto, es mejor escribir su ancho en el CSS que define Affix, como:
.Affix {ancho: 250px;}De esta manera, no hay problema cuando la ventana es lo suficientemente grande, pero cuando arrastra y cambia el tamaño de la ventana, encontrará que el diseño está en mal estado nuevamente. Este problema me ha preocupado durante mucho tiempo. Finalmente, al analizar el código fuente de BOOTCSS, descubrí que el sitio web ha agregado "impresión oculta", "Hidden-XS", "Hidden-SM" atribuye a todas las clases que usan elementos de afijo. Se usa para ocultar Aftix cuando la pantalla no cumple con los requisitos. Aunque afecta la facilidad de uso, asegura que el diseño esté bien en cualquier caso.
Lo anterior es una explicación detallada del uso de controles de afijo en Bootstrap y la forma de mantener el hermoso diseño. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!