Cet article présente la surveillance du défilement bootstrap pour que tout le monde puisse apprendre. Le contenu spécifique est le suivant
La surveillance du défilement accompagnée de défilement des barres de défilement, les éléments de liste sont constamment commutés et activés.
<! - id = "menu" est l'objet d'écoute pour data-target = "# menu" -> <! - Navbar Navbar-inner NAV NAVBAR-FIXED-TOP FIXE NAVIGATION BAR -> <div> <div> <div> <li> <a href = "# 1"> list1 </a> </li> <li> <a href = "# 2"> list2 </a> Dropdown-menu Dropdown-menu Call Appel Behavior Behavior -> <a href = "#" data-toggle = "dropdown" menu dropdown <b> </b> </a> <ul> <li> <a href = "# 3"> Liste 3 </a> </li> <li> <a href = "# 4"> List 4 </a> </li> <li> 5 </a> </li> </li> </li> </div> </div> <! - Data-Spy = "Scroll" Définir les attributs de données pour l'objet d'écoute -> <! - Data-Target = "Menu" Set Listen Object -> <! 1 </h3> <p> <img src = "img / 1.jpg"> </p> <h3 id = "2"> liste 2 </h3> <p> <img src = "img / 2.jpg"> </p> <h3 id = "3"> list 3 </ h3> <p> <img src = "img / 3.jpg"> <h33 id = "4"> liste 4 </h3> <p> <img src = "img / 4.jpg"> </p> <h3 id = "5"> List 5 </h3> <p> <img src = "img / 5.jpg"> </p> </ div>
Surveillance de défilement
<body data-spy="scroll" data-target="#navbar" data-offset="0"><div id="navbar"> <ul> <li><a href="#1">List1</a></li> <li><a href="#2">List2</a></li> <li> <a href="#2">List2</a></li> <li> <a href = "#" data-toggle = "dropdown"> menu déroulant <b> </b> </a> <ul> <li> <a href = "# 3"> List3 </a> </li> <li> <a href = "# 4"> List4 </a> </li> <li> <a href = "# 5"> List5 </a> </ul> </div> <! - Data-Spy = "Scroll" Définit les attributs de données pour les objets d'écoute -> <! - Data-Target = "# Menu" Définit des objets d'écoute -> <! - Data-Offset = "30" Définit Offset -> <div> <h3 id = "1"> List 1 </ H3> <p> <img src = "img / 1.jpg"> <h3 id = "2"> liste 2 </ h3> <p> <img src = "img / 2.jpg"> </p> <h3 id = "3"> List 3 </ h3> <p> <img src = "img / 3.jpg"> </ p> <h3 id = "4"> list 4 </h3> <p> <img src = "img / 4.j> </h3> <p> <img Src =" IMG / 4.j> <h3 id = "5"> Liste 5 </h3> <p> <img src = "img / 5.jpg"> </p> </div>
Style CSS
#navbar {position: fixe; À droite: 10px; en haut: 50px; Largeur: 200px; Color d'arrière-plan: #fff;}Appelé:
Le premier: utilisez la méthode Data-Spy = "Scroll", ce qui précède est
Le deuxième type: utilisez les appels JS
HTML supprime simplement Data-Spy = "Scroll"
$ (function () {$ ("body"). ScrollSpy (); // Lorsqu'un nouvel élément de barre de navigation est activé, $ ("body"). sur ("activer", fonction (e) {if (e.target && $ (e.target) .hasclass ("dropdown")) {$ (e.target) .Childrendren ("ul.dropd-menu"). "Block");} else {$ (e.target) .parent (). Find ("ul.dropdown-menu"). css ("affiche", "aucun");}})});Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher un sujet merveilleux: Tutoriel d'apprentissage bootstrap
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.