Cet article apprend principalement le plug-in javascript - écoute de défilement.
1. Cas
Le plug-in d'écoute Scroll peut mettre à jour automatiquement les marques de navigation correspondantes en fonction de la position de la barre de défilement. Vous pouvez essayer de faire défiler cette page et voir les modifications de la navigation à gauche.
Mettez d'abord le code implémenté, vous pouvez vérifier l'effet en testant le code.
<!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!--[if lt IE 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/Respond.min.Min.js"> </ Script> <! <style type = "text / css"> .scrollspy-example {hauteur: 200px; débordement: auto; Position: relative; Border: 1px rouge solide; } </ style> </ head> <body> <div> <nav id = "navbar-example" role = "navigation"> <v> <button type = "Button" data-toggle = "effondrement" data-target = ". bs-js-navbar-scrollspy"> <span> toggle navigation </pander> <pander> </pander> <pander> </ Button> <a href = "#"> Nom du projet </a> </div> <div> <ul> <li> <a href = "# fat"> @ fat </a> </li> <li> <a href = "# mdo"> @ mDo </a> </li> <li> <a href = "#" id = "NAVBARDROP1" Data-Toggle = "dropdow <b> </b> </a> <ul role = "menu" aria-labelledby = "Navbardrop1"> <li> <a href = "# one" tabindex = "- 1"> un </a> </li> <li> <a href = "# deux" tabindex = "- 1"> deux </a> </li> <li> tabindex = "- 1"> trois </a> </li> </ul> </li> </li> </li> </li> </div> </AV> <div data-offset = "0" Data-Spy = "Scroll" Data-Tanget = "# Navbar-Example"> <h4 id = "fat"> @ fat Laborat. Pitchfork yr Enim Lo-Fi avant de vendre Qui. Tumblr Farm-to-Table Rights Droits Quoi qu'il en soit. Anim Keffiyeh Carles Cardigan. Velit Seitan McSweeney's Photo Booth 3 Wolf Moon Irure. Cosby Sweater Lomo Jean Shorts, Williamsburg Hoodie minimum qui vous n'avez probablement pas entendu parler d'eux et esthétique du cardigan fiducie Culpa Biodiesel Wes Anderson. Nihil tatoued Accusamus, Cred Irony Biodiesel Keffiyeh Artisan Ullamco Contorat. </p> <h4 id = "MDO"> @ mdo </h4> <p> Veniam Marfa Moustache Skateboard, adipising fugiat velit pitchfork Bear. Freegan Bear Aliqua Cupidat McSweeney's Vero. Cupidat quatre Loko Nisi, Ea Helvetica Nulla Carles. Tatoued Cosby Pull Food Truck, Quis Non Freegan Vinyl de McSweeney. Lo-Fi Wes Anderson +1 Sartorial. Carles Exercice non esthétique QUIS Gentrify. Brooklyn Adipisiting Craft Beer Vice Keytar Deserunt. </p> <h4 id = "One"> One </h4> <p> Occaecat Commodo Aliqua Delectus. FAP Craft Beer Deserunt Skateboard Ea. Lomo Rights Bicycle Rights APISIANT BANH MI, Velit EA SUNT NEXT NIVEAU LOCAVORE ORIGIN ORIGINE à Magna Venia. Vinyl High Life ID, Echo Park Contacat Quis Aliquip Banh Mi Pitchfork. Vero VHS est adipising. Consectetur Nisi DIY Messager minimum Messager Sac. Cred ex IN, durable Delectus consiste à Fanny Pack iPhone. </p> <h4 id = "Two"> Two </h4> <p> dans InciDunt Echo Park, officiel Deserunt McSweeney Master Cleanse Thundercats Sapiente Venia. Excepteur VHS Elit, Prodent Shoreditch +1 Biodiesel Labourum Craft Beer. Wayfarers du café à un seul original Irure Four Loko, Culidat Terry Richardson Master Cleanse. ASMUMENDA Vous n'avez probablement pas entendu parler de leur fête d'art Fanny Pack, tatoued Nulla Cardigan Temporal Ad. PROREIENT WOLF NESCIUNT SARTORAL KEFFIYEH EU BANH MI DURABLE. Elit Wolf Voluptate, Lo-Fi Ea Portland avant de vendre quatre Loko. Locavore Enim Nostrud Mlkshk Brooklyn Nesciunt. </p> <h4 id = "trois"> Trois </h4> <p> Ad Leggings Keytar, Brunch Id Art Party Dolor Labor. Pitchfork yr Enim Lo-Fi avant de vendre Qui. Tumblr Farm-to-Table Rights Droits Quoi qu'il en soit. Anim Keffiyeh Carles Cardigan. Velit Seitan McSweeney's Photo Booth 3 Wolf Moon Irure. Cosby Sweater Lomo Jean Shorts, Williamsburg Hoodie minimum qui vous n'avez probablement pas entendu parler d'eux et esthétique du cardigan fiducie Culpa Biodiesel Wes Anderson. Nihil tatoued Accusamus, Cred Irony Biodiesel Keffiyeh Artisan Ullamco Contorat. </p> <p> keytar twee Blog, Culpa Messenger Bag Marfa What Delectus Food Truck. Sapiente Synth ID assumenda. Locavore Sed Helvetica Cliche Irony, Thundercats Vous n'en avez probablement pas entendu parler de consécutif Lo-Fi Fap Aliquip sans gluten. Labour Elit Place avant de se vendre, Terry Richardson PROIENT BRUCH NESCIUNT QUIS COSBY PARATUR Pariatur Kffiyeh Ut Helvetica Artisan. Cardigan Craft Beer Seitan Readymade Velit. VHS Chambray Laboris Temporary Veniam. Anim Mollit Minimal Commodo Ullamco Thundercats. </p> </ div> </ div> <script src = "js / jQuery-2.0.3.min.js"> </ script> <script src = "js / bootstrap.min.js"> </ script> </ body> </html>Utilisation 1-- via l'attribut de données
En l'ajoutant au div pour les éléments de page que vous devez écouter (généralement) mais en les ajoutant à la div, vous pouvez voir le code vous-même. Ajoutez ensuite l'attribut data-spy = "Scroll" au div pour ajouter facilement la fonction d'écoute de défilement à la barre de navigation supérieure. Ensuite, ajoutez l'attribut de cible de données, la valeur de cet attribut est l'ID ou la classe de l'élément parent du composant .nav dans n'importe quel bootstrap.
Copiez le code comme suit: <div data-offset = "0" data-spy = "scroll" data-target = "# navbar-example">
...........
</div>
L'adresse de liaison de navigation doit avoir une cible correspondante
L'adresse de liaison dans la barre de navigation doit avoir l'élément de page correspondant avec la même valeur d'ID.
Utilisation 2-- via JavaScript
Commencez à faire défiler l'écoute via JavaScript:
<script type = "text / javascript"> $ (function () {$ ('. ScrollSpy-Example'). ScrollSpy ({Target: '# Navbar-Example'});}) </ script>Supprimez sa propriété Data-Target en plaçant la classe de style en tant que div d'exemple de scrollspy. Cela vous permet également de changer la roue de la souris.
2. Méthode
.ScrollSpy («rafraîchissement»)
Lorsque vous utilisez le plugin d'écoute Scroll, cette méthode doit être appelée chaque fois qu'un élément de page est ajouté ou supprimé du DOM dans la page, comme suit:
Copiez le code de code comme suit: $ ('[data-spy = "scroll"]'). Chaque (fonction () {var $ spy = $ (this) .scrollspy ('rafhes')})
3. Options
Les options peuvent être transmises à travers les propriétés de données ou JavaScript. Pour les attributs de données, vous devez mettre le nom de l'option après les données, par exemple Data-Offset = "".
4. Événements
<script type = "text / javascript"> $ ('# navbar-example'). sur ('activate.bs.scrollspy', function () {alert (1);}) </script>Enfin, note: Bien sûr, vous devez ajouter des barres de défilement au contenu de la surveillance de défilement, c'est-à-dire que vous devez ajouter des styles à l'avance.
<style type = "text / css"> .scrollspy-example {hauteur: 200px; débordement: auto; Position: relative; Border: 1px rouge solide; } </ style>Donnez à Div Content une certaine hauteur.
Ce qui précède est les notes d'apprentissage pour le défilement de bootstrap et la surveillance du contenu lié. Si vous souhaitez toujours continuer à apprendre Bootstrap, vous pouvez cliquer ici pour continuer à apprendre. J'espère que ce sera utile à votre apprentissage. J'espère également que vous continuerez à prêter attention à un contenu plus excitant de Wulin.com.