Este artículo aprende principalmente el complemento de JavaScript - Escuchar el desplazamiento.
1. Caso
El complemento de escucha de desplazamiento puede actualizar automáticamente las marcas de navegación correspondientes de acuerdo con la posición de la barra de desplazamiento. Puede intentar desplazar esta página y ver los cambios en la navegación a la izquierda.
Primero pon el código implementado, puede verificar el efecto probando el código.
<! DOCTYPE HTML> <HTML> <HEAD> <title> bootstrap </title> <meta name = "viewport" content = "width = dispositivo-width, inicial-escale = 1.0"> <!-bootstrap-> <link href = "css/boottap.min.css" rel = "Stylesheet" Media = "Media =" screen "<!-[!-[! 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/rippond.js/1.3.0/prespond.min.js> <script"> <script " < desbordamiento: auto; Posición: relativo; borde: 1px rojo sólido; } </style> </head> <body><div > <nav id="navbar-example" role="navigation"> <div> <button type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </botton> <a href = "#"> nombre del proyecto </a> </div> <div> <ul> <li> <a href = "#fat">@fat </a> </li> <li> <a href = "#mdo">@mdo </a> </li> <li> <a href = "#" Id = "Navbardrop1" Data-data-datawdown " <b> </b> </a> <ul role = "menú" Aria-LabelledBy = "NavBardrop1"> <li> <a href = "#un" tabindex = "-1"> One </a> </li> <li> <a href = "#dos" Tabindex = "-1"> dos </a> </li> </li> <s> <A Href = "#"#" tabindex = "-1"> tres </a> </li> </ul> </li> </li> </li> </li> </div> </ain> <div data offset = "0" data-spy = "scroll" data-target = "#navbar-eexample"> <h4 id = "gat">@gat </h4> <p> ad-leggings keytar, brunch art. Pitchfork yr enim lo-fi antes de que se agoten. Tumblr Derechos de la bicicleta de la granja a la mesa. Anim Keffiyeh Carles Cardigan. Velit Seitan McSweeney's Photo Booth 3 Wolf Moon Irure. Suéter de cosby lomo jean shorts, sudadera con capucha de Williamsburg mínimo qui probablemente no hayan oído hablar de ellos y el fondo fiduciario de cárdigan culpa biodiesel wes anderson estética. Nihil tatuado acusado, cred irony biodiesel keffiyeh artisan ullamco consecuente. </p> <h4 id = "mdo">@mdo </h4> <p> veniam marfa bigote skate, adipising fisiat velit stongfork ear. Freegan Bear Aliqua Cupidat McSweeney's Vero. Cupidat cuatro Loko Nisi, Ea Helvetica Nulla Carles. Séter Cosby Tattooed Camina de comida, el vinilo de McSweeney's Quis Non Freegan. Lo-Fi Wes Anderson +1 Sartorial. Carles Ejercicio no estético Quis Gentrify. Brooklyn Adipising Craft Beer Vice Keytar Deserunt. </p> <h4 id = "one"> one </h4> <p> Occaecat comrodo aliqua delectus. FAP Beer Craft Deserunt Skateboard ea. Lomo Derechos de bicicletas Apisining Banh MI, Velit Ea Sunt Next Nivel Locavore Café de origen único en Magna Venia. Vinyl de identificación de alta vida, Echo Park consecuente Quis Aliquip Banh Mi Pitchfork. Vero vhs est adipising. Consectetur Nisi Bag Mínimo Messenger de bricolaje. Cred Ex In, Sostenible Delectus consisten a Fanny Pack iPhone. </p> <h4 id = "dos"> dos </h4> <p> en Incididunt Echo Park, el oficial de ceñentes de Deserunt McSweeney, el maestro Cleanse Thundercats Sapiente Venia. Excepto VHS Elit, Proident Shoreditch +1 Biodiesel Laborum Cereberia de artesanía. Wayfarers de café de un solo origen IRure Four Loko, Cupidat Terry Richardson Master Cleanse. Asumenda Probablemente no hayas oído hablar de ellos Partido de la fiesta de arte, el anuncio temporal de Cardigan Nulla Tattooed. Proident Wolf Nesciunt Sartorial Keffiyeh EU banh mi sostenible. Elit Wolf Voluptate, Lo-Fi Ea Portland antes de que vendieran cuatro Loko. Locavore Enim Nostrud Mlkshk Brooklyn Nesciunt. </p> <h4 id = "tres"> tres </h4> <p> AD Leggings Keytar, Brunch Id Art Party Dolor Labor. Pitchfork yr enim lo-fi antes de que se agoten. Tumblr Derechos de la bicicleta de la granja a la mesa. Anim Keffiyeh Carles Cardigan. Velit Seitan McSweeney's Photo Booth 3 Wolf Moon Irure. Suéter de cosby lomo jean shorts, sudadera con capucha de Williamsburg mínimo qui probablemente no hayan oído hablar de ellos y el fondo fiduciario de cárdigan culpa biodiesel wes anderson estética. Nihil tatuado acusado, cred irony biodiesel keffiyeh artesan ullamco consecuente. </p> <p> Blog de twee Keytar, Bag Messenger de Culpa Marfa cualquier camión de comida delectus. Sapiente Synth ID Asumenda. Locavore Sed Helvetica Cliché Ironía, ThunderCats Probablemente no hayan oído hablar de ellos consecuentes sudadera con capucha sin gluten fap fap aliquip. Labor Elit Place antes de que se agoten, el Brunch Proidental de Terry Richardson Nesciunt Quis Cosby Sweater Pariatur Keffiyeh Ut Helvetica Artisan. Cardigan Craft Beer Seitan Readymade Velit. VHS Chambray Laboris Veniam temporal. Anim Mollit Minimal Commrodo Ullamco Thundercats. </p> </div> </div> <script src = "js/jQuery-2.0.3.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>
Uso 1-- A través del atributo de datos
Al agregarlo al DIV para los elementos de página que necesita escuchar (generalmente), pero agregándolos al DIV, puede ver el código usted mismo. Luego agregue el atributo data spy = "desplazarse" al DIV para agregar fácilmente la función de escucha de desplazamiento a la barra de navegación superior. Luego, agregue el atributo de Target de datos, el valor de este atributo es la identificación o clase del elemento principal del componente .nav en cualquier bootstrap.
Copie el código de la siguiente manera: <Div dataScetSet = "0" data-spy = "scroll" data-target = "#navbar-exame">
...........
</div>
La dirección del enlace de navegación debe tener un objetivo correspondiente
La dirección de enlace en la barra de navegación debe tener el elemento de página correspondiente con el mismo valor de identificación.
Uso 2-- a través de JavaScript
Comience a desplazarse a la escucha a través de JavaScript:
<script type = "text/javaScript"> $ (function () {$ ('. scrollspy-example'). scrollspy ({target: '#navbar-exame'});}) </script>Elimine su propiedad de objetivo de datos colocando la clase de estilo como un div. Esto también le permite cambiar la rueda del mouse.
2. Método
.scrollspy ('actualizar')
Al usar el complemento de escucha de desplazamiento, se debe llamar a este método cada vez que se agrega o elimine un elemento de página del DOM en la página, de la siguiente manera:
Copie el código del código de la siguiente manera: $ ('[data-spy = "scroll"]'). Cada (function () {var $ spy = $ (this) .scrollspy ('refresh')})
3. Opciones
Las opciones se pueden pasar a través de propiedades de datos o JavaScript. Para los atributos de datos, debe poner el nombre de la opción después de datos, por ejemplo, Data Offset = "".
4. Eventos
<script type = "text/javaScript"> $ ('#navbar-exame'). on ('activate.bs.scrollspy', function () {alert (1);}) </script>Finalmente, tenga en cuenta: por supuesto, debe agregar barras de desplazamiento al contenido del monitoreo de desplazamiento, es decir, debe agregar estilos por adelantado.
<style type = "text/css"> .scrollspy-exame {altura: 200px; desbordamiento: auto; Posición: relativo; borde: 1px rojo sólido; } </style>Dale al contenido Div una cierta altura.
Las anteriores son las notas de aprendizaje para el contenido relacionado con desplazamiento y monitoreo de Bootstrap. Si aún desea continuar aprendiendo Bootstrap, puede hacer clic aquí para continuar aprendiendo. Espero que sea útil para su aprendizaje. También espero que continúe prestando atención a un contenido más emocionante de Wulin.com.