El complemento de monitoreo de scroll (ScrollSpy), es decir, la actualización automática del complemento de navegación, actualizará automáticamente el objetivo de navegación correspondiente de acuerdo con la posición de la barra de desplazamiento. Su implementación básica es agregar una clase activa a la barra de navegación basada en la posición de barra de desplazamiento a medida que se desplaza.
Si desea hacer referencia a la funcionalidad del complemento por separado, debe hacer referencia a scrollspy.js. O, como se menciona en el capítulo de descripción general del complemento Bootstrap, puede consultar bootstrap.js o versiones comprimidas de bootstrap.min.js.
1. Uso
Puede agregar un comportamiento de escucha de desplazamiento a la navegación superior:
1. A través del atributo de datos: agregue datos-spy = "desplazarse" al elemento que desea escuchar (generalmente cuerpo). Luego agregue el Target de datos de atributo con la ID del elemento principal del componente Bootstrap .Nav o la propiedad de la clase. Para que funcione correctamente, debe asegurarse de que haya elementos en el cuerpo de la página que coincidan con la identificación del enlace que desea escuchar.
<Body data-spy = "scroll" data-target = ". Navbar-exame"> ... <div> <ul> ... </ul> </div> ... </body>
2. A través de JavaScript: puede llamar al monitoreo de desplazamiento a través de JavaScript, seleccione el elemento que se escuche y luego llame a la función .scrollspy ():
$ ('Body'). ScrollSpy ({Target: '.navbar-exame'})
2. Monitoreo de desplazamiento
El complemento de escucha de desplazamiento se utiliza para actualizar automáticamente elementos de navegación en función de la posición donde se encuentra la barra de desplazamiento, y mostrar elementos de navegación resaltados.
// Ejemplo básico <Nav id = "Nav"> <a href = "#"> Desarrollo web </a> <ul> <li> <a href = "#html5"> html5 </a> </li> <li> <a href = "#bootstrap"> bootstrap </a> </li> <li> <a href = "#" data-toggle " <span> </span> </a> <ul> <li> <a href = "#jQuery"> jQuery </a> </li> <li> <a href = "#yui"> yui </a> </li> <li> <a href = "#extjs"> extjs </a> </li> </li> </li> </li> </li> <//</ul ul data offset = "0" data-target = "#nav" data-spy = "scroll" style = "altura: 200px; desbordamiento: auto; posición: relativo; padding: 0 10px;"> <h4 id = "html5"> html5 </h4> <p> una aplicación html bajo el idioma universal estándar después de html4.01 se liberó en diciembre de 1999, se lanzó en diciembre de 1999 en diciembre de 1999. HTML5 y otros estándares quedaron atrás. Para promover el desarrollo del movimiento de estandarización web, algunas compañías unieron fuerzas para establecer un Grupo de Trabajo de Tecnología de Aplicación de Hipertexto web (Organización web del Grupo de Trabajo de Tecnología de Aplicación Hypertext-Whatwg. Whatwg está dedicado a formularios y aplicaciones web, mientras que W3C (World Wide Consorcium) se enfoca en XHTML2.0. En 2006, las dos partes decidieron cooperar para crear una nueva versión de Html. ID = "Bootstrap"> Bootstrap </h4> <p> Bootstrap, de Twitter, es actualmente un marco frontal muy popular, se basa en HTML, CSS y Javascript. Proporciona especificaciones elegantes de HTML y CSS, escritas en el lenguaje CSS dinámico menos. Optimización. ya no admitirá el navegador IE6/7/8. Separe del contenido HTML. Los hongos después de una lluvia han surgido. <h4 id = "extjs"> extjs </h4> <p> extjs puede usarse para desarrollar RIA, es decir, aplicaciones AJAX de clientes ricos. ExtJS se basó originalmente en la tecnología YUI y fue desarrollado por el desarrollador Jackslocum.
Hay dos atributos importantes, como se muestra en la figura a continuación:
PD: En un menú y un momento fácil, Data-Target también puede ser estable para realizar un resaltado de monitoreo de desplazamiento sin configuración. Pero cuando no asocia a uno de ellos cuando múltiples navegaciones, causará un error, por lo que generalmente debe agregarse.
Si usa el método de secuencia de comandos JavaScript, puede eliminar los datos:* y usar definiciones de atributos de script: offset, espía y destino. Los métodos específicos son los siguientes:
// Defina la propiedad $ ('#content'). ScrollSpy ({offset: 0, target: '#nav',});También hay un evento para cambiar a una nueva entrada.
// Los eventos están obligados a navegación
$ ('#nav'). on ('activate.bs.scrollspy', function () {
alerta ('¡Este evento se activa después de activarse una nueva entrada!');
});
También hay una forma de actualizar el contenedor DOM en el desplazamiento de la escucha.
// parte html
<sect> <h4 id = "html5"> html5 <a href = "#" onClick = "removesec (this)"> Eliminar esto </a> </h4> <p> ... </p> </section>
// Al eliminar el contenido, actualice el DOM para evitar la desalineación del monitoreo de la navegación
función eliminar (e) {$ (e) .Parents ('. Sec'). Remove (); $ ('#Content'). ScrollSpy ('Refresh');}Nota: Este método debe usar datos-* declarativo.
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.