Le plugin de navigation supplémentaire (APPIX) permet à un <div> d'être épinglé quelque part sur la page. Vous pouvez également basculer entre activer ou désactiver à l'aide du plugin. Un exemple courant est les icônes sociales. Ils commenceront quelque part, mais lorsque la page cliquera sur une marque, le <div> se verrouille quelque part et ne fait pas défiler avec le reste de la page.
Si vous souhaitez référencer la fonctionnalité du plugin séparément, vous devez référencer Affix.js. Ou, comme mentionné dans le chapitre Bootstrap Plugin Présentation, vous pouvez vous référer à bootstrap.js ou versions compressées de bootstrap.min.js.
usage
Vous pouvez utiliser le plug-in de navigation jointe (affixe) via des propriétés de données ou via JavaScript.
Grâce à des attributs de données: si vous devez ajouter un comportement de navigation (affixe) supplémentaire à l'élément, vous n'avez qu'ajouter Data-Spy = "Affix" à l'élément que vous devez écouter. Utilisez des décalages pour définir lorsque vous faites basculer le verrouillage et le mouvement des éléments.
Exemple
L'exemple suivant montre comment utiliser un plugin de navigation supplémentaire (APPIX) via l'attribut de données:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> bootstrap jointe de navigation (affix) plug-in </ title> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "stylesheet"> <script src = "/ scripts / jQuery.min.js"> </ script> <script src = "/ bootstrap / js / bootstrap.min.js"> </ script> <style type = "Text / CSS"> / * Styles personnalisés * / ul.nav-tabs {width: 140px; margin-top: 20px; border-radus: border: 1px; margin-top #ddd; box-shadow: 0 1px 4px rgba (0, 0, 0, 0,067);} ul.nav-tabs li {margin: 0; border-top: 1px solide #ddd;} ul.nav-tabs li: premier-enfant {border-top: Aucun;} ul.nav-tabs li a {margin: 0; padding: 8px 16px; 0;} ul.nav-tabs li.active a, ul.nav-tabs li.active a: hover {couleur: #ffff; arrière 4px;} ul.nav-tabs.affix {top: 30px; /* Set the top position of pinned element */}</style></head><body data-spy="scroll" data-target="#myScrollspy"><div><div><h1>Bootstrap Affix</h1></div><div><div id="myScrollspy"><ul data-spy="affix" data-offset-top="125"><li><a href = "# section-1"> Partie 1 </a> </li> <li> <a href = "# section-2"> Partie 2 </a> </li> <li> <a href = "# section-3"> Partie 3 </a> </li> <li> <a href = "# section-4"> Part 4 </a> </li> <li> <a href = "# section-5"> Part " 5 </a> </li> </ul> </div> <div> <h2 id = "section-1"> Partie 1 </h2> <p> lorem ipsum Dolor sit amet, cohetur apiscing elit. NAM EU SEM THEMPORT, VARIUS QUAM AT, LUCTUS DUI. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibibendum scelerisque non non purus. Suspendisse Varius Nibh non Aliquet Sagittis. Dans Tincidunt Orci, assis Amet Elementtum Vestibulum. Vivamus fermentum dans l'arcu à Aliquam. QUISQUE ALIQUAM Porta Odio à Fringilla. Vivamus Nisl Leo, Blandit à Bibendum EU, Risque Tristique Eget. Entier Aliquet Quam ut elit Suscipit, id Interdum Neque Porttter. Faucibus entier Ligula. </p> <p> vestibulum quis quam ut magna consécère Faucibus. Pellentesque Eget Nisi A Mi Suscipit TincidUnt. Ut tempus dictum risus. Pelletesque Viverra Sagittis Quam à Mattis. Suspendisse potentieli. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Phasellus Autor Velit à Lacus Blandit, Commodo iaculis justeso viverra. Etiam vitae est arcu. Mauris Vel Congue Dolor. Aliquam Eget Mi Mi. Fusce Quam Tortor, Commodo ACDUIS DUIS QUIS, Bibendum viverra Erat. Maecenas Mattis Lectus Enim, QUIS TINCIDUNT DUI MOLESTIE EUISMOD. CURABITUR ET DIAMER TRISTIQUE, accumsan Nunc Eu, Hendrerit Tellus. </p> <hr> <h2 id = "section-2"> Partie 2 </h2> <p> nullam Hendrerit Just Non Leo Aliquet Imperdiet. Etiam dans Sagittis Lectus. Suspendisse ultrices placera accumsan. Mauris Quiis Dapibus Orci. Dans Dapibus Velit Blandit Pharetra Tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. SED VIVERRA INTERDUM Bibendum. Donec AC Sollicitudin Dolor. SED FRINGILLA VITAE LACUS À RUTUM. Phasellus Congue Vestibulum Ligula sed Contorat. </p> <p> vestibulum consentetur Scelerisque Lacus, un fermentum lorem convallis sed. Nam odio Tortor, dictous quis malesuada at, Pellenentsque vitae orci. Vivamus elementtum, Felis eu Autor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed à Facilisis Libero. Cum sociis natoque Penatibus et magnis dis partisan montes, nastretur ridiculus mus. Vestibulum bibendum blandit Dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus SEM Augue, Hendrerit non Sapien IN, Mollis Ornare Augue. </p> <hr> <h2 id = "Section-3"> Partie III </h2> <p> Vestibulum en plomb Pulvinar ID Pulvinar ID. Sed Diamond Libero, Sodales Eget Sapien Vel, Porttter Bibendum Enim. Donec Sed Nibh Vitae Lorem Portritor Blandit dans NEC ANTE. Pelletesque vitae metus ipsum. Phasellus sed Nunc AC SEM Malesuada condimentum. Etiam dans Aliquam Lectus. Nam vel sapien diam. Donec Pharetra Id Arcu Egg Blandit. Proin Imperdiet Mattis Augue à Porttter. QUISQUE Tempus Enim id lobortis feugiat. Suspendisse Tincidunt risquus quis Dolor Fringilla Blandit. Ut sed sapien au Purus Lacinia Porttter. Nullam iaculis, felis a pretium ornare, Dolor nisl Semper Tortor, vel sagittis lacus est consécat eros. Sed id pretium nisl. Curabitur Dolor Nisl, Laoreet Vitae Aliquam ID, Tincidunt Sit Amet Mauris. </p> <p> Phasellus vitae Suscipit Justo. Mauris Pharetra Feugiat ante id Lacinia. Etiam Faucibus Mauris id temporaire egestas. DUIS LUCTUS TURPIS ACHER ACCUMSAN TINCIDUNT. Risque de phasellus risque, Volutpat Vel Tellus AC, Tincidunt Fringilla Massa. Etiam Hendrerit Dolor Eget ante rutrum adipiscing. CRAS Interdum ipsum Mattis, Tempus Mauris Vel, Semper Ipsum. DUIS SED DOLOR UT ENIM LOBORTIS PELLETESQUE ULTRICES AC LIGULA. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. CRAS ac pulvinar purus, ac viverra est. Suspendisse potentiali. Entier Pelletsque Neque et élémentum tempus. Curabitur Bibendum dans Ligula ut rhoncus. </p> <p> Quisque Pharetra Velit id velit iaculis pretium. Nullam A Justo Sed Ligula Porta Semper Eu QUIS Enim. Pelletesque pelentesque, metus à Facilisis Hendrerit, lectus velit facilisis leo, quit volutpat turpis arcu quis enim. Nulla viverra lorem élémentum interdum ultricy. Suspendisse Accumsan Quam Nec ante Mollis Tempus. Morbi Vel Accumsan Diamond, Eget Convallis Tellus. Suspendisse potentieli. </p> <hr> <h2 id = "section-4"> Partie 4 </h2> <p> Suspendisse a orci facilisis, dignessim Tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis Ligula, NEC Volutpat Tellus. Vivamus sclerisque mollis nisl, véhicula nc elit egestas a. SED Luctus metus id Mi Gravida, Faucilibus convallis Neque Pretium. Maecenas Quiis Sapien ut Leo Fringilla temporae Vitae Sit Amet Leo. Donec Imperdiet Tempus Placerat. Ultrices Pelletesque Pulvinar Nunc SED Ultrices. Morbi vel Mi pretium, Fermentum Lacus et, Viverra Tellus. Phasellus Sodales Libero NEC DUI Convallis, SIT AMET Fermentum Sapien Autotor. Vestiblum ante ipsum primis dans Faucibibus orci luctus et ultrices posuere cubilia curae; Sed eu elementtum Nibh, quis Varius libéro. </p> <p> vestiblum quis quam ut magna consécère Faucibus. Œuf pelleltesque nisi a mi suscipit Tincidunt. Ut tempus dictum risus. Pelletesque Viverra Sagittis Quam à Mattis. Suspendisse potentieli. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Phasellus Autor Velit à Lacus Blandit, Commodo iaculis justeso viverra. Etiam vitae est arcu. Mauris Vel Congue Dolor. Aliquam Eget Mi Mi. Fusce Quam Tortor, Commodo AC DUI QUIS, Bibendum Viverra Erat. Maecenas Mattis Lectus Enim, QUIS TINCIDUNT DUI MOLESTIE EUISMOD. CURABITUR ET DIAMER TRISTIQUE, accumsan Nunc Eu, Hendrerit Tellus. </p> <p> phasellus fermentum, Neque Sit Amet Sodales Tempor, Enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc Ornare Erat Quis Faucibus Magietie. Proin malesuada consécutive le commodo. Mauris iaculis, Eros ut Dapibus Luctus, Massa Enim Elementtum Purus, SIT AMET TRISTIQUE PURUS PURUS NEC FELIS. Morbi vestibulum sapien eget porta pulvinar. Nam à Quam Diam. Proin rhoncus, felis élément accumsan dictum, felis nisi vestibulum tell, et ultrices risus felis dans Orci. QUISQUE VESTIBULUM SEM NISL, Vel Congue Leo Dicttum NEC. Cras eget est à Velit Sagittis ullamcorper vel et lectus. Dans HAC Habitasse Platea dictumst. Etiam interdum iaculis velit, vel sollicitudine lorem feugiat sit amet. Etiam Luctus, Quam Sed Sodales Aliquam, Lorem Libero Hendrerit Urna, Faucibus rhoncus massa nibh à Felis. CURABITUR AC TEMPUS NULLA, UT SEMPER ERAT. Vivamus porta ullamcorper seme, ornare egestas Mauris facilisis id. </p> <p> ut ut diskus nisl. Fusce Porttter Eros à Magna Luctus, non congue nulla eleifend. Porttter Aenean Feugiat Dolor Sit Amet Facilisis. Pellentesque Venenatis magna et risque Commodo, un Commodo turpis gravida. Nam mollis massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornare orci, eu malesuada juste. Nunc Lacus Augue, dictoum quid DUI ID, Lacinia Congue Quam. Nulla SEM SEM, ALIQUAM NEC DOLOR AC, TEMPUS CONVALLIS NUNC. Interdum et malesuada célèbre ac ante ipsum primis dans Faucibus. Nulla Suscipit convallis iaculis. QUISQUE Eget Commodo Ligula. PRAESENT LEO DUI, FACILISIS QUIS ELEIFEND IN, ALIQUET VITAE NUNC. Suspendisse fermentum odio ac massa ultrices Pellenenetesque. Fusce eu Suscipit Massa. </p> <hr> <h2 id = "section-5"> Partie 5 </h2> <p> nam eget purus nEn est cohétique véhicule. Nullam ultrices nisl Risk, dans Viverra Libero Egestas Sit Amet. Etiam Porttter Dolor Non Eros Pulvinar Malesuada. Vestibulum assis amet est mollis nulla tempus aliquet. Prasente Luctus Hendrerit arcu non laoreet. Morbi Contorat Placerat Magna, Ac Ornare Odio Sagittis Sed. Donec Vitae Ullamcorper Purus. Vivamus non metus ac jut porta volutpat. </p> <p> vivamus mattis accumsan erat, vecallis risque pretium nec. Nunn nunn nunla, viverra ut seme non, sclerisque véhicula arcu. Fusce Bibendum convallis Augue Sit Amet Lobortis. Cras porta urna turpis, sodales lobortis purus apiscing id. Maecenas Ullamcorper, Turpis Suscipit pelentesque Fringilla, Massa Lacus pulvinar Mi, NEC DIGNISSIM Velit arcu eget purus. Nam à Dapibus Tellus, Eget Euismod Nisl. Ut eget Venenatis Sapien. Vivamus vulputate Varius Mauris, Vel Varius nisl facilisis ac. Nulla aliquet juste un nibh ornare, eu conue neque rutrum. </p> <p> suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis Ligula, NEC Volutpat Tellus. Vivamus sclerisque mollis nisl, véhicula nc elit egestas a. SED Luctus metus id Mi Gravida, Faucibus convallis Neque Pretium. Maecenas Quiis Sapien ut Leo Fringilla temporae Vitae Sit Amet Leo. Donec Imperdiet Tempus Placerat. Ultrices Pelletesque Pulvinar Nunc SED Ultrices. Morbi vel Mi pretium, Fermentum Lacus et, Viverra Tellus. Phasellus Sodales Libero NEC DUI Convallis, SIT AMET Fermentum Sapien Auctor. Vestibulum ante ipsum primis dans Faucibibus orci luctus et ultrices posuere cubilia curae; Sed eu elementtum nibh, quis varius libéro. </p> <p> morbi sed fermentum ipsum. Morbi A Orci Vulputate Tortor ornare Blandit a Quis Orci. Donec Aliquam Sodales Gravida. Dans ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consécutif lorem sit amet, pulvinar tells. Dans Tincidunt Vel Leo Eget Pulvinar. CURABITUR A Eros non Lacus malesuada Aliquam. Prasente et tempus odio. Entier un quam nunc. Dans Hab Habitasse Platea dictumst. Aliquam porta nibh nulla, et Mattis turpis placerat eget. Pelletesque DUI Diamond, pelentesque vel gravida id, accumsan eu magna. Sed a semper arcu, ut dignissim leo. </p> <p> sed vitae lobortis diam, id molestie magna. ALIQUAM CONSULAT ISTUM IPSUM QUISST IMTRICES. Aenean Nibh Velit, Fringilla en diamant id, Blandit Hendrerit lacus. Donec Vehicula Rutrum raconte à Egg Fermentum. Pelletesque Ac erat et arcu ornare Tincidunt. Aliquam erat volutpat. Vivamus lobortis Urna Quis Gravida Semper. Dans Condimentum, EST A Faucibus Luctus, Mi Dolor cursus MI, id Vehicula arcu risque a nibh. Pellentesque Blandit Sapien Lacus, Vel Vehicula Nunc Feugiat Sit Amet. </p> </div> </div> </div> </ body> </html>Les résultats sont les suivants:
Via JavaScript: vous pouvez ajouter manuellement la navigation supplémentaire (affixe) à un élément via JavaScript, comme indiqué ci-dessous:
$ ('# myAffix'). Affix ({offset: {top: 100, inférieur: function () {return (this.bottom = $ ('. bs-footer'). OuterHeight (true))}}})Exemple
L'exemple suivant montre comment utiliser un plugin de navigation supplémentaire (APPIX) via JavaScript:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> bootstrap jointe de navigation (affix) plug-in </ title> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "stylesheet"> <script src = "/ scripts / jQuery.min.js"> </ script> <script src = "/ bootstrap / js / bootstrap.min.js"> </ script> <style type = "Text / CSS"> / * Styles personnalisés * / ul.nav-tabs {width: 140px; margin-top: 20px; border-radus: border: 1px; margin-top #ddd; box-shadow: 0 1px 4px rgba (0, 0, 0, 0,067);} ul.nav-tabs li {margin: 0; border-top: 1px solide #ddd;} ul.nav-tabs li: premier-enfant {border-top: Aucun;} ul.nav-tabs li a {margin: 0; padding: 8px 16px; 0;} ul.nav-tabs li.active a, ul.nav-tabs li.active a: hover {couleur: #ffff; arrière 4px;} ul.nav-tabs.affix {top: 30px; / * Définissez la position supérieure de l'élément épinglé * /} </ style> <script type = "text / javascript"> $ (document) .ready (function () {$ ("# mynav"). Affix ({offset: {top: 125}});}); </cript> Data-Target = "# MyScrollSpy"> <div> <div> <h1> Bootstrap Affix </h1> </div> <div> <div id = "MyScrollSpy"> <ul ID = "Mynav"> <li> <a href = "# section-1"> Part I </a> </li> <li> <a href = "# section-2"> Part II </a> </li> <li> <a href = "# section-3"> Partie I </a> </li> <li> <a href = "# section-4"> Partie IV </a> </li> <li> <a href = "# section-5"> Partie 5 </a> </li> </ul> </v> <v> <h2 Id = "section-" 1 </h2> <p> lorem ipsum Dolor Sit amet, cohetur adipiscing elit. NAM EU SEM THEMPORT, VARIUS QUAM AT, LUCTUS DUI. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestiblum id metus ac nisl bibibendum scelerisque non non purus. Suspendisse Varius Nibh non Aliquet Sagittis. Dans Tincidunt Orci, assis Amet Elementtum Vestibulum. Vivamus fermentum dans l'arcu à Aliquam. QUISQUE ALIQUAM Porta Odio à Fringilla. Vivamus nisl Leo, Blandit à Bibendum EU, Tristique Eget Riskus. Entier Aliquet Quam ut elit Suscipit, id Interdum Neque Porttter. Faucibus entier Ligula. </p> <p> vestibulum quis quam ut magna consécère Faucibus. Pellentesque Eget Nisi A Mi Suscipit TincidUnt. Ut tempus dictum Risk. Pelletesque Viverra Sagittis Quam à Mattis. Suspendisse potentieli. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Phasellus Autor Velit à Lacus Blandit, Commodo iaculis justeso viverra. Etiam vitae est arcu. Mauris Vel Congue Dolor. Aliquam Eget Mi Mi. Fusce Quam Tortor, Commodo AC DUI QUIS, Bibendum Viverra Erat. Maecenas Mattis Lectus Enim, QUIS TINCIDUNT DUI MOLESTIE EUISMOD. CURABITUR ET DIAMER TRISTIQUE, accumsan Nunc Eu, Hendrerit Tellus. </p> <hr> <h2 id = "section-2"> Partie 2 </h2> <p> nullam Hendrerit Just Non Leo Aliquet Imperdiet. Etiam dans Sagittis Lectus. Suspendisse ultrices placera accumsan. Mauris Quiis Dapibus Orci. Dans Dapibus Velit Blandit Pharetra Tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. SED VIVERRA INTERDUM Bibendum. Donec AC Sollicitudin Dolor. SED FRINGILLA VITAE LACUS À RUTUM. Phasellus Congue Vestibulum Ligula sed Contorat. </p> <p> vestibulum coretur Scelerisque lacus, acermem lorem convallis sed. Nam odio Tortor, dictous quis malesuada at, Pellenentsque vitae orci. Vivamus élémentum, Felis eu Autor lobortis, diam velit egstas lacus, quis fermentum metus ante quis urna. Sed à Facilisis Libero. Cum sociis natoque Penatibus et magnis dis partisan montes, nastretur ridiculus mus. Vestibulum bibendum blandit Dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus SEM Augue, Hendrerit non Sapien IN, Mollis Ornare Augue. </p> <hr> <h2 id = "Section-3"> Partie III </h2> <p> Vestibulum en plomb Pulvinar ID Pulvinar ID. Sed Diamond Libero, Sodales Eget Sapien Vel, Porttter Bibendum Enim. Donec Sed Nibh Vitae Lorem Portritor Blandit dans NEC ANTE. Pelletesque vitae metus ipsum. Phasellus sed Nunc AC SEM Malesuada condimentum. Etiam dans Aliquam Lectus. Nam vel sapien diam. Donec Pharetra Id Arcu Egg Blandit. Proin Imperdiet Mattis Augue à Porttter. QUISQUE Tempus Enim id lobortis feugiat. Suspendisse Tincidunt risquus quis Dolor Fringilla Blandit. Ut sed sapien au Purus Lacinia Porttter. Nullam iaculis, felis a pretium ornare, Dolor nisl Semper Tortor, vel sagittis lacus est consécat eros. Sed id pretium nisl. Curabitur Dolor Nisl, Laoreet Vitae Aliquam ID, Tincidunt Sit Amet Mauris. </p> <p> Phasellus vitae Suscipit Justto. Mauris Pharetra Feugiat ante id Lacinia. Etiam Faucibus Mauris id temporaire Egstas. DUIS LUCTUS TURPIS ACHER ACCUMSAN TINCIDUNT. Phasellus risquus risquus, Volutpat Vel Tellus AC, Tincidunt Fringilla Massa. Etiam Hendrerit Dolor Eget ante rutrum adipiscing. CRAS Interdum ipsum Mattis, Tempus Mauris Vel, Semper Ipsum. DUIS SED DOLOR UT ENIM LOBORTIS PELLETESQUE ULTRICES AC LIGULA. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. CRAS ac pulvinar purus, ac viverra est. Suspendisse potentiali. Entier pelentsque neque et élémentum tempus. Curabitur Bibendum dans Ligula ut rhoncus. </p> <p> Quisque Pharetra Velit id velit iaculis pretium. Nullam A Just Sed Ligula Porta Semper Eu QUIS Enim. Pelletesque pelentesque, metus à Facilisis Hendrerit, lectus velit facilisis leo, quit volutpat turpis arcu quis enim. Nulla viverra lorem élémentum interdum ultricy. Suspendisse Accumsan Quam Nec ante Mollis Tempus. Morbi Vel Accumsan Diamond, Eget Convallis Tellus. Suspendisse potentieli. </p> <hr> <h2 id = "section-4"> Partie 4 </h2> <p> Suspendisse a orci facilisis, dignessim Tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis Ligula, NEC Volutpat Tellus. Vivamus sclerisque mollis nisl, véhicula nc elit egestas a. SED Luctus metus id Mi Gravida, Faucibus convallis Neque Pretium. Maecinas Quiis Sapien ut Leo Fringilla temporae Vitae Sit Amet Leo. Donec Imperdiet Tempus Placerat. Ultrices Pelletesque Pulvinar Nunc SED Ultrices. Morbi vel Mi pretium, Fermentum Lacus et, Viverra Tellus. Phasellus Sodales Libero NEC DUI Convallis, SIT AMET Fermentum Sapien Autotor. Vestiblum ante ipsum primis dans Faucibibus orci luctus et ultrices posuere cubilia curae; SED EU ELEMENTUM NIBH, QUIS VARIUS libéro. </p> <p> vestibulum Quim Quam ut MAGNA CONSONTAT Faucibus. Pellentesque Eget Nisi A Mi Suscipit TincidUnt. Ut tempus dictum risus. Pelletesque Viverra Sagittis Quam à Mattis. Suspendisse potentieli. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Phasellus Autor Velit à Lacus Blandit, Commodo iaculis justeso viverra. Etiam vitae est arcu. Mauris Vel Congue Dolor. Aliquam Eget Mi Mi. Fusce Quam Tortor, Commodo AC DUIS QUIS, Bibendum Viverra Erat. Maecenas Mattis Lectus Enim, QUIS TINCIDUNT DUI MOLESTIE EUISMOD. CURABITUR ET DIAMER TRISTIQUE, accumsan Nunc Eu, Hendrerit Tellus. </p> <p> phasellus fermentum, Neque Sit Amet Sodales Tempor, Enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc Ornare Erat Quis Faucibus Magietie. Proin malesuada consécutive le commodo. Mauris iaculis, Eros ut Dapibus Luctus, Massa Enim Elementtum Purus, SIT AMET TRISTIQUE PURUS PURUS NEC FELIS. Morbi vestibulum sapien eget porta pulvinar. Nam à Quam Diam. Proin rhoncus, felis élément accumsan dictum, felis nisi vestibulum tell, et ultrices risque felis dans Orci. QUISQUE VESTIBULUM SEM NISL, Vel Congue Leo Dicttum NEC. Cras eget est à Velit Sagittis ullamcorper vel et lectus. Dans HAC Habitasse Platea dictumst. Etiam interdum iaculis velit, vel sollicitudine lorem feugiat sit amet. Etiam Luctus, Quam Sed Sodales Aliquam, Lorem Libero Hendrerit Urna, Faucibus rhoncus massa nibh à Felis. CURABITUR AC TEMPUS NULLA, UT SEMPER ERAT. Vivamus porta ullamcorper seme, ornare egestas Mauris facilisis id. </p> <p> ut ut diskus nisl. Fusce Porttter Eros à Magna Luctus, non congue nulla eleifend. Porttter Aenean Feugiat Dolor Sit Amet Facilisis. Pellentesque Venenatis Magna et Risus Commodo, un Commodo Turpis Gravida. Nam mollis massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornare orci, eu malesuada juste. Nunc Lacus Augue, dictoum quid DUI ID, Lacinia Congue Quam. Nulla SEM SEM, ALIQUAM NEC DOLOR AC, TEMPUS CONVALLIS NUNC. Interdum et malesuada célèbre ac ante ipsum primis dans Faucibus. Nulla Suscipit convallis iaculis. QUISQUE Eget Commodo Ligula. PRAESENT LEO DUI, FACILISIS QUIS ELEIFEND IN, ALIQUET VITAE NUNC. Suspendisse fermentum odio ac massa ultrices Pellenenetesque. Fusce eu Suscipit Massa. </p> <hr> <h2 id = "section-5"> Partie 5 </h2> <p> nam eget purus nEC est conformetur véhicule. Nullam Ultrices Nisl Risk, dans Viverra Libero Egstas Sit Amet. Etiam Porttter Dolor Non Eros Pulvinar Malesuada. Vestibulum assis amet est mollis nulla tempus aliquet. Prasente Luctus Hendrerit arcu non laoreet. Morbi Contorat Placerat Magna, Ac Ornare Odio Sagittis Sed. Donec Vitae Ullamcorper Purus. Vivamus non metus ac juso porta volutpat. </p> <p> Vivamus Mattis accumsan erat, Vel convallis Risk Pretium nec. Nunn nunn nunla, viverra ut seme non, sclerisque véhicula arcu. Fusce Bibendum convallis Augue Sit Amet Lobortis. Cras porta urna turpis, sodales lobortis purus apiscing id. Maecenas Ullamcorper, Turpis Suscipit pelentesque Fringilla, Massa Lacus pulvinar Mi, NEC DIGNISSIM Velit arcu eget purus. Nam à Dapibus Tellus, Eget Euismod Nisl. Ut eget Venenatis Sapien. Vivamus vulputate Varius Mauris, Vel Varius nisl facilisis ac. Nulla aliquet juste un nibh ornare, eu conue neque rutrum. </p> <p> suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis Ligula, NEC Volutpat Tellus. Vivamus sclerisque mollis nisl, véhicula nc elit egestas a. SED Luctus metus id Mi Gravida, Faucibus convallis Neque Pretium. Maecenas Quiis Sapien ut Leo Fringilla temporae Vitae Sit Amet Leo. Donec Imperdiet Tempus Placerat. Ultrices Pelletesque Pulvinar Nunc SED Ultrices. Morbi vel Mi pretium, Fermentum Lacus et, Viverra Tellus. Phasellus Sodales Libero NEC DUI Convallis, SIT AMET Fermentum Sapien Autotor. Vestiblum ante ipsum primis dans Faucibibus orci luctus et ultrices posuere cubilia curae; Sed eu elementtum nibh, quis varius libéro. </p> <p> morbi sed fermentum ipsum. Morbi A Orci Vulputate Tortor ornare Blandit a Quis Orci. Donec Aliquam Sodales Gravida. Dans ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consécutif lorem sit amet, pulvinar tells. Dans Tincidunt Vel Leo Eget Pulvinar. CURABITUR A Eros non Lacus malesuada Aliquam. Prasente et tempus odio. Entier un quam nunc. Dans Hab Habitasse Platea dictumst. Aliquam porta nibh nulla, et Mattis turpis placerat eget. Pelletesque DUI Diamond, Pellentesque Vel Gravida Id, Accrum Eu Magna. Sed a semper arcu, ut dignissim leo. </p> <p> sed vitae lobortis diam, id molestie magna. ALIQUAM CONSULAT ISTUM IPSUM QUISST IMTRICES. Aenean Nibh Velit, Fringilla en diamant id, Blandit Hendrerit lacus. Donec Vehicula Rutrum raconte à Egg Fermentum. Pelletesque Ac erat et arcu ornare Tincidunt. Aliquam erat volutpat. Vivamus lobortis Urna Quis Gravida Semper. Dans Condimentum, EST A Faucibus Luctus, Mi Dolor cursus MI, id Vehicula arcu risque a nibh. Pellentesque Blandit Sapien Lacus, Vel Vehicula Nunc Feugiat sit.Les résultats sont les suivants:
Positionnement via CSS
Dans les deux façons ci-dessus d'utiliser le plug-in Affix, vous devez localiser le contenu via CSS. Le plug-in de navigation supplémentaire (APPIX) bascule entre trois classes, chacune présente un état spécifique: .Affix, .Affix-top et .Affix-Bottom. Veuillez suivre les étapes ci-dessous pour configurer votre propre CSS pour ces trois états (sans compter sur ce plugin).
Au début, le plugin ajoute. Aucun positionnement CSS n'est requis pour le moment.
Lors du défilement d'un élément où la navigation supplémentaire (affixe) est ajoutée, la navigation supplémentaire réelle (affixe) doit être déclenchée. À l'heure actuelle, .Affix remplacera. Affix-TOP et Set Position: Fixed; (Fourni par le code CSS de Bootstrap).
Si le décalage inférieur est défini, lorsque le défilement atteint cette position, remplacez. Affix par. Affix-Bottom. Étant donné que le décalage est facultatif, si le décalage est défini, un CSS approprié doit être défini en même temps. Dans ce cas, ajoutez la position: absolue; si nécessaire.
Options
Il existe certaines options qui sont transmises à travers les propriétés de données ou JavaScript. Le tableau suivant répertorie ces options:
Ce qui précède est l'explication détaillée de l'exemple de plug-in de navigation supplémentaire (affixe) introduit par l'éditeur. J'espère que ce sera utile à tous!