El complemento de navegación adicional (Afix) permite que un <div> se fije en algún lugar de la página. También puede alternar entre activar o apagar con el complemento. Un ejemplo común son los íconos sociales. Comenzarán en algún lugar, pero cuando la página haga clic en una marca, <Div> se bloqueará en algún lugar y no se desplazará junto con el resto de la página.
Si desea hacer referencia a la funcionalidad del complemento por separado, debe hacer referencia a Affix.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.
uso
Puede usar el complemento de navegación adjunto (Aftix) a través de propiedades de datos o a través de JavaScript.
A través de los atributos de datos: si necesita agregar un comportamiento de navegación adicional (Afix) al elemento, solo necesita agregar Data-Spy = "Affix" al elemento que necesita escuchar. Use compensaciones para definir cuando alterne el bloqueo y el movimiento de los elementos.
Ejemplo
El siguiente ejemplo demuestra cómo usar un complemento de navegación adicional (Affix) a través del atributo de datos:
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> bootstrap conectado navegación (Affix) complemento </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">/* Custom Styles */ul.nav-tabs{width: 140px;margin-top: 20px;border-radius: 4px;border: 1px solid #ddd; box-shadow: 0 1px 4px rgba (0, 0, 0, 0.067);} ul.nav-tabs li {margin: 0; border-top: 1px solid #ddd;} ul.nav-tabs li: first-child {border-top: none;} ul.nav-tabs li a {margin: 0; padding: 8px 16px; 0;} ul.nav-tabs li.active a, ul.nav-tabs li.active a: hover {color: #ffff; fondo: #0088cc; border: 1px sólido #0088cc;} ul.nav-tabs li: first-child a {border-radio: 4px 4px 0 0; ul. ul.nav-tabs li {border-Radius 0 4px 4px;} ul.nav-tabs.affix {top: 30px; / * Establezca la posición superior del elemento fijado */} </style> </head> <body data spy = "scroll" data-target = "#myScrollSpy"> <div> <div> <hiv> <h1> bootstrap Affix </h1> </bil> <Viv> <divi = "myScrollSpy"> <ult data-spy = "afiJ-offset-offsetset-top =" 125 125 href = "#Sección-1"> Parte 1 </a> </li> <li> <a href = "#Sección-2"> Parte 2 </a> </li> <li> <a href = "#Sección-3"> Parte 3 </a> </li> <li> <a href = "#Sección-4"> Parte 4 </a> </li> <li> <a href = " 5 </a> </li> </ul> </div> <div> <h2 id = "Sección-1"> Parte 1 </h2> <p> lorem ipsum dolor sit amet, consistur apisching elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, Dapibus NEC Turpis vel, Semper Malesuada Ante. Vestibulum ID Metus AC nisl bibendum sellerisque non no purus. Suspendisse Varius nibh no aliquet sagittis. En Tincidunt Orci Sit Amet Elementum vestibulum. Vivamus fermentum en Arcu en Aliquam. Quisque Aliquam Porta Odio en Fringilla. Vivamus nisl Leo, Blandit en Bibendum EU, Tristique Eget Risk. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula. </p> <p> vestibulum quis quam ut magna consecuente faucibus. Pellentesque Eget nisi a mi suscipit tincidunt. UT Tempus dictum risus. Pellentesque Viverra Sagittis Quam en Mattis. Suspendia potenciali. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Phasellus Autor Velit en Lacus Blandit, Commrodo Iaculis Justo 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 Diam Tristique, Accumsan Nunc EU, Hendrerit Tellus. </p> <hr> <h2 id = "Sección-2"> Parte 2 </h2> <p> nulfleam Hendrerit simplemente no leo aliquet imperdiet. Etiam en Sagittis lectus. Suspendisse Ultrices placera acumsan. Mauris Quis Dapibus Orci. En Dapibus Velit Blandit Pharetra Tincidunt. Quisque no sapien nec lacus condimentum facilisis ut iaculis enim. Sed Viverra Interdum bibendum. Donec AC Sollicitudin Dolor. Sed Fringilla Vitae lacus en Rutrum. Phasellus Congue vest Nam Odio Tortor, Dictum Quis Malesuada at, Pellenentesque Vitae Orci. Vivamus Elementum, Felis EU Autor Lobortis, Diam Velit Eggiors Lacus, Quis Fermentum metus Ante Quis Urna. Sed en Facilisis Libero. Cum Sociis Natoque Penatibus et Magnis Dis Particurient Montes, Nascetur 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 = "Sección-3"> Parte III </h2> <p> Integer pulvinar Leo ID Riesgo PelleteSque Vestibulum. Sed Diamond Libero, Sodales Eget Sapien Vel, Porttitor Bibendum Enim. Donec sed nibh vitae lorem porttitor blandit en nec ante. Pellentesque Vitae Metus ipsum. Phasellus Sed Nunc AC SEM Malesuada condimentum. Etiam en Aliquam Lectus. Nam vel sapien diam. Donec Pharetra Id Arcu Egg Blandit. Proin Imperdiet Mattis Augue en Porttitor. Quisque tempus enim id lobortis Feugiat. Suspendisse Tincidunt Riskus Quis Dolor Fringilla Blandit. Ut Sed Sapien en Purus Lacinia Porttitor. NulLam iaculis, Felis A Pretium Ornare, Dolor nisl Semper Tortor, Vel Sagittis lacus est consecuente 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 tempor egestas. DUIS LUCTUS TURPIS en Accumsan Tincidunt. Riesgo de Phasellus Riskus, 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 ultricies pelletesque ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum Ullamcorper ut. Cras AC Pulvinar Purus, AC Viverra Est. Suspendisse potenciali. Integer Pelletsque Neque et Elementum tempus. Curabitur bibendum en Ligula ut Rhoncus. </p> <p> quisque pharetra viLit id Velit iaculis pretium. Nulmam a justo sed ligula porta semper eu quis enim. Pelente Pelentesque, Metus en Facilisis Hendrerit, Lectus Velit Facilisis Leo, Quis Volutpat Turpis Arcu Quis Enim. Nulla Viverra Lorem Elementum Interdum Ultricies. Suspendisse Accumsan Quam Nec ante Mollis Tempus. Morbi Vel Accumsan Diamond, Eget Convallis Tellus. Suspendisse potenciali. </p> <hr> <h2 id = "Sección-4"> Parte 4 </h2> <p> suspendis a orci facilisis, tortor dignissim vitae, ultrices mi. Vestibulum a Iaculis lacus. Phasellus vitae convallis ligula, NEC Volutpat Tellus. Vivamus Sclerisque Mollis Nisl, NEC VEHICULA ELIT E GISTESS a. SED LUCTUS METUS ID Mi Gravida, Faucilibus convallis neque pretium. Maecenas Quis Sapien Ut Leo Fringilla Tempe Vitae Sit Amet Leo. Donec Imperdiet Tempus Placerat. Ultrices de pulvinar pelvinórico nunces. Morbi Vel Mi Pretium, Fermentum Lacus et, Viverra Tellus. Phasellus Sodales Libero Nec Dui Convallis, Sit Amet Fermentum Sapien Autotor. Vestiblum ante ipsum primis en faucibus orci luctus et ultrices Posuere cubilia curae; Sed eu elementum nibh, quis varius libero. </p> <p> vestiblum quis quam ut magna consecuente faucibus. Huevo pelelente nisi a mi suscipit tincidunt. UT Tempus dictum risus. Pellentesque Viverra Sagittis Quam en Mattis. Suspendia potenciali. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Phasellus Autor Velit en Lacus Blandit, Commrodo Iaculis Justo 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 Diam Tristique, Accumsan Nunc Eu, Hendrerit Tellus. </p> <p> fasellus fermentum, neque sit amet sodales temporales, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc Ornare Erat Quis Faucibus Molestie. Proin Malesuada consecuente Comrodo. Mauris iaculis, Eros ut dapibus luctus, masa enim elementum purus, Sit amet tristique purus purus nec Felis. Morbi Vestibulum Sapien Eget Porta Pulvinar. Nam en Quam diam. Proin Rhoncus, Felis Elementum Acumsan dictum, Felis nisi vestibulum tellus, et ultrices risus felis en Orci. Quisque Vestibulum sem nisl, Vel Congage Leo Dictum Nec. Cras Et EST en Velit Sagittis Ullamcorper Vel et lectus. En HAC HábitaSse Platea Dictumst. Etiam Interdum Iaculis Velit, Vel Sollicitudin Lorem Feugiat Sit AMET. Etiam Luctus, Quam Sed Sodales aliquam, Lorem Libero Hendrerit Urna, Faucibus rhoncus Massa nibh en Felis. Curabitur AC Tempus nulla, UT Semper Erat. Vivamus Porta Ullamcorper SEM, Ornare Eggestas Mauris Facilisis Id. </p> <p> UT UT Riskus Nisl. Fusce Porttitor Eros en Magna Luctus, no Congue Nulla Eleifend. Aenean Porttitor Feugiat Dolor Sit Amet Facilisis. Pellentesque Venenatis Magna et Riskus Commodo, un Commodo Turpis gravida. Nam Mollis Massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornare orci, eu malesuada justto. Nunc Lacus Augue, Dictum Quis Dui ID, Lacinia Congue Quam. Nulla Sem Sem, Aliquam Nec Dolor AC, Tempus convallis Nunc. Interdum et Malesuada Fames ac ante ipsum primis en faucibus. Nulla Suscipit Convallis iaculis. Quisque Eget Commrodo Ligula. Praesent Leo Dui, facilisis quis eleifend en, aliquet vitae nunc. Suspendisse fermentum odio ac masa ultricies pelelenentesque. Fusce EU Suscipit Massa. </p> <hr> <h2 id = "Sección-5"> Parte 5 </h2> <p> nam eget purus nec est consistyet vehicula. NULLAM ULTRICES NISL RIESGO, en Viverra Libero Eggestas se sientan amet. Etiam Porttitor Dolor Non Eros Pulvinar Malesuada. Vestibulum Sit Amet est Mollis Nulla Tempus Aliquet. Praesent Luctus Hendrerit Arcu Non Laoreet. Morbi consecuente Placerat Magna, AC Ornare Odio Sagittis Sed. Donec Vitae Ullamcorper Purus. Vivamus no Metus AC Just PortA Volutpat. </p> <p> Vivamus Mattis Acumsan Erat, Vel Convallis Risk Pretium NEC. Integer Nunc Nulla, Viverra Ut Sem Non, Sclerisque Vehicula 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 en Dapibus Tellus, Eget Euismod nisl. Ut Eget Venenatis Sapien. Vivamus vulputate a varius mauris, vel varius nisl facilisis ac. Nulla aliquet solo un nibh ornare, la UE congue neque rutrum. </p> <p> suspendis a orci facilisis, dignissim tortor vitae, ultrices mip. Vestibulum a Iaculis lacus. Phasellus vitae convallis ligula, NEC Volutpat Tellus. Vivamus Sclerisque Mollis Nisl, NEC VEHICULA ELIT E GISTESS a. SED LUCTUS METUS ID Mi Gravida, Faucibus convallis neque pretium. Maecenas Quis Sapien Ut Leo Fringilla Tempe Vitae Sit Amet Leo. Donec Imperdiet Tempus Placerat. Ultrices de pulvinar pelvinórico nunces. Morbi Vel Mi Pretium, Fermentum Lacus et, Viverra Tellus. Phasellus Sodales Libero Nec Dui Convallis, Sit Amet Fermentum Sapien Auctor. Vestibulum ante ipsum primis en faucibus orci luctus et ultrices Posuere cubilia curae; Sed eu elementum nibh, quis varius libero. </p> <p> morbi sed fermentum ipsum. Morbi A Orci Vulputate Tortor Ornare Blandit A Quis Orci. Donec Aliquam Sodales gravida. En UT Ullamcorper nisi, AC Pretium Velit. Vestibulum vitae lectus Volutpat, consecuente lorem sit amet, pulvinar tellus. En Tincidunt Vel Leo Eget Pulvinar. Curabitur A Eros Non Lacus Malesuada aliquam. Praesent et Tempus Odio. Entero un quam nunc. En Hab Hábitohesse Platea Dictumst. Aliquam Porta Nibh Nulla, et Mattis Turpis Placerat Eget. Pellentesque 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 consecuente ipsum quis est ultrices de dictum. Aenean Nibh Velit, Fringilla en Diam ID, Blandit Hendrerit Lacus. Donec Vehicula Rutrum le dice al huevo fermentum. Pellentesque Ac erat et Arcu Ornare Tincidunt. Aliquam Erat Volutpat. Vivamus lobortis urna quis gravida semper. En condimentum, est a faucibus luctus, mi dolor cursus mi, id vehículos arcu arriesgado un nibh. Pellentesque Blandit Sapien Lacus, Vel Vehicula Nunc Feugiat Sit AMET. </p> </div> </div> </div> </body> </html>Los resultados son los siguientes:
A través de JavaScript: puede agregar manualmente la navegación (Afix) a un elemento a través de JavaScript, como se muestra a continuación:
$ ('#myaffix'). Affix ({offset: {top: 100, fondo: function () {return (this.bottom = $ ('. BS-Footer'). OuterHeight (true))}})Ejemplo
El siguiente ejemplo demuestra cómo usar un complemento de navegación adicional (Aftix) a través de JavaScript:
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> bootstrap conectado navegación (Affix) complemento </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">/* Custom Styles */ul.nav-tabs{width: 140px;margin-top: 20px;border-radius: 4px;border: 1px solid #ddd; box-shadow: 0 1px 4px rgba (0, 0, 0, 0.067);} ul.nav-tabs li {margin: 0; border-top: 1px solid #ddd;} ul.nav-tabs li: first-child {border-top: none;} ul.nav-tabs li a {margin: 0; padding: 8px 16px; 0;} ul.nav-tabs li.active a, ul.nav-tabs li.active a: hover {color: #ffff; fondo: #0088cc; border: 1px sólido #0088cc;} ul.nav-tabs li: first-child a {border-radio: 4px 4px 0 0; ul. ul.nav-tabs li {border-Radius 0 4px 4px;} ul.nav-tabs.affix {top: 30px; / * Establezca la posición superior del elemento clavado */} </ystye> <script type = "text/javascript"> $ (document) .ready (function () {$ ("#mynav"). Affix ({offset: {top: 125}});}); </script> </head> <body data-spy = "scrroll" data-target = "#myscrollspy"> <div> <iv> <hiv> <h1> bootstrap afixe </h1> </div> <div> <div id = "myscrollspy"> <ul id = "mynav"> <li> <a href = "#section-1"> Parte I </a> </li> <li> <a href = "#section-2"> Ii </a> </li> <li> <a href = "#Sección-3"> Parte I </a> </li> <li> <a href = "#Sección-4"> Parte IV </a> </li> <li> <a href = "#Sección-5"> Parte 5 </a> </li> </ul> </iv> <iv> <hiv> ID = "Sección"> "" 1 </h2> <p> lorem ipsum dolor sit amet, consistimiento adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, Dapibus NEC Turpis vel, Semper Malesuada Ante. Vestiblum id Metus ac nisl bibendum schelerisque non no purus. Suspendisse Varius nibh no aliquet sagittis. En Tincidunt Orci Sit Amet Elementum vestibulum. Vivamus fermentum en Arcu en Aliquam. Quisque Aliquam Porta Odio en Fringilla. Vivamus nisl Leo, Blandit en Bibendum EU, Tristique Eget Riskus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula. </p> <p> vestibulum quis quam ut magna consecuente faucibus. Pellentesque Eget nisi a mi suscipit tincidunt. UT Tempus dictum Riesgo. Pellentesque Viverra Sagittis Quam en Mattis. Suspendia potenciali. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Phasellus Autor Velit en Lacus Blandit, Commrodo Iaculis Justo 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 Diam Tristique, Accumsan Nunc EU, Hendrerit Tellus. </p> <hr> <h2 id = "Sección-2"> Parte 2 </h2> <p> nulfleam Hendrerit simplemente no leo aliquet imperdiet. Etiam en Sagittis lectus. Suspendisse Ultrices placera acumsan. Mauris Quis Dapibus Orci. En Dapibus Velit Blandit Pharetra Tincidunt. Quisque no sapien nec lacus condimentum facilisis ut iaculis enim. Sed Viverra Interdum bibendum. Donec AC Sollicitudin Dolor. Sed Fringilla Vitae lacus en Rutrum. PHASELLUS Congue Vestibulum ligula sed consecuente. </p> <p> vestibulum consistente escelerisque lacus, ac fermentum lorem convallis sed. Nam Odio Tortor, Dictum Quis Malesuada at, Pellenentesque Vitae Orci. Vivamus Elementum, Felis EU Autor Lobortis, Diam Velit Egstas lacus, Quis fermentum metus ante Quis Urna. Sed en Facilisis Libero. Cum Sociis Natoque Penatibus et Magnis Dis Particurient Montes, Nascetur 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 = "Sección-3"> Parte III </h2> <p> Integer pulvinar Leo ID Riesgo PelleteSque Vestibulum. Sed Diamond Libero, Sodales Eget Sapien Vel, Porttitor Bibendum Enim. Donec sed nibh vitae lorem porttitor blandit en nec ante. Pellentesque Vitae Metus ipsum. Phasellus Sed Nunc AC SEM Malesuada condimentum. Etiam en Aliquam Lectus. Nam vel sapien diam. Donec Pharetra Id Arcu Egg Blandit. Proin Imperdiet Mattis Augue en Porttitor. Quisque tempus enim id lobortis Feugiat. Suspendisse Tincidunt Riskus Quis Dolor Fringilla Blandit. Ut Sed Sapien en Purus Lacinia Porttitor. NulLam iaculis, Felis A Pretium Ornare, Dolor nisl Semper Tortor, Vel Sagittis lacus est consecuente 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 tempor egstas. DUIS LUCTUS TURPIS en Accumsan Tincidunt. PHASELLUS RIESTUS RIESTUS, 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 ultricies pelletesque ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum Ullamcorper ut. Cras AC Pulvinar Purus, AC Viverra Est. Suspendisse potenciali. Integer Pelentesque Neque et Elementum tempus. Curabitur bibendum en Ligula ut Rhoncus. </p> <p> quisque pharetra viLit id Velit iaculis pretium. Nulmam a just sed ligula porta semper eu quis enim. Pelente Pelentesque, Metus en Facilisis Hendrerit, Lectus Velit Facilisis Leo, Quis Volutpat Turpis Arcu Quis Enim. Nulla Viverra Lorem Elementum Interdum Ultricies. Suspendisse Accumsan Quam Nec ante Mollis Tempus. Morbi Vel Accumsan Diamond, Eget Convallis Tellus. Suspendisse potenciali. </p> <hr> <h2 id = "Sección-4"> Parte 4 </h2> <p> suspendis a orci facilisis, tortor dignissim vitae, ultrices mi. Vestibulum a Iaculis lacus. Phasellus vitae convallis ligula, NEC Volutpat Tellus. Vivamus Sclerisque Mollis Nisl, NEC VEHICULA ELIT E GISTESS a. SED LUCTUS METUS ID Mi Gravida, Faucibus convallis neque pretium. Maecinas Quis Sapien Ut Leo Fringilla Tempe Vitae Sit Amet Leo. Donec Imperdiet Tempus Placerat. Ultrices de pulvinar pelvinórico nunces. Morbi Vel Mi Pretium, Fermentum Lacus et, Viverra Tellus. Phasellus Sodales Libero Nec Dui Convallis, Sit Amet Fermentum Sapien Autotor. Vestiblum ante ipsum primis en faucibus orci luctus et ultrices Posuere cubilia curae; Sed eu elementum nibh, quis varius libero. </p> <p> vestibulum quis quam ut magna consecuente faucibus. Pellentesque Eget nisi a mi suscipit tincidunt. UT Tempus dictum risus. Pellentesque Viverra Sagittis Quam en Mattis. Suspendia potenciali. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Phasellus Autor Velit en Lacus Blandit, Commrodo Iaculis Justo 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 Diam Tristique, Accumsan Nunc Eu, Hendrerit Tellus. </p> <p> fasellus fermentum, neque sit amet sodales temporales, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc Ornare Erat Quis Faucibus Molestie. Proin Malesuada consecuente Comrodo. Mauris iaculis, Eros ut dapibus luctus, masa enim elementum purus, Sit amet tristique purus purus nec Felis. Morbi Vestibulum Sapien Eget Porta Pulvinar. Nam en Quam diam. Proin Rhoncus, Felis Elementum Acumsan dictum, Felis nisi vestibulum tellus, et ultrices corren el riesgo de Felis en Orci. Quisque Vestibulum sem nisl, Vel Congage Leo Dictum Nec. Cras Et EST en Velit Sagittis Ullamcorper Vel et lectus. En HAC HábitaSse Platea Dictumst. Etiam Interdum Iaculis Velit, Vel Sollicitudin Lorem Feugiat Sit AMET. Etiam Luctus, Quam Sed Sodales aliquam, Lorem Libero Hendrerit Urna, Faucibus rhoncus Massa nibh en Felis. Curabitur AC Tempus nulla, UT Semper Erat. Vivamus Porta Ullamcorper SEM, Ornare Eggestas Mauris Facilisis Id. </p> <p> UT UT Riskus Nisl. Fusce Porttitor Eros en Magna Luctus, no Congue Nulla Eleifend. Aenean Porttitor Feugiat Dolor Sit Amet Facilisis. Venenatis Pellentesque Magna et Risus Commrodo, un comrodo turpis gravida. Nam Mollis Massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornare orci, eu malesuada justto. Nunc Lacus Augue, Dictum Quis Dui ID, Lacinia Congue Quam. Nulla Sem Sem, Aliquam Nec Dolor AC, Tempus convallis Nunc. Interdum et Malesuada Fames ac ante ipsum primis en faucibus. Nulla Suscipit Convallis iaculis. Quisque Eget Commrodo Ligula. Praesent Leo Dui, facilisis quis eleifend en, aliquet vitae nunc. Suspendisse fermentum odio ac masa ultricies pelelenentesque. Fusce EU Suscipit Massa. </p> <hr> <h2 id = "Sección-5"> Parte 5 </h2> <p> nam eget purus nec est conformetur vehicula. NULLAM ULTRICES NISL RIESGO, en Viverra Libero Egstas se sientan amet. Etiam Porttitor Dolor Non Eros Pulvinar Malesuada. Vestibulum Sit Amet est Mollis Nulla Tempus Aliquet. Praesent Luctus Hendrerit Arcu Non Laoreet. Morbi consecuente Placerat Magna, AC Ornare Odio Sagittis Sed. Donec Vitae Ullamcorper Purus. Vivamus no metus AC JUSTO PORTA VOLUTPAT. </p> <p> Vivamus mattis acumsan erat, vel convallis riesgo pretium nec. Integer Nunc Nulla, Viverra Ut Sem Non, Sclerisque Vehicula 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 en Dapibus Tellus, Eget Euismod nisl. Ut Eget Venenatis Sapien. Vivamus vulputate a varius mauris, vel varius nisl facilisis ac. Nulla aliquet solo un nibh ornare, la UE congue neque rutrum. </p> <p> suspendis a orci facilisis, dignissim tortor vitae, ultrices mip. Vestibulum a Iaculis lacus. Phasellus vitae convallis ligula, NEC Volutpat Tellus. Vivamus Sclerisque Mollis Nisl, NEC VEHICULA ELIT E GISTESS a. SED LUCTUS METUS ID Mi Gravida, Faucibus convallis neque pretium. Maecenas Quis Sapien Ut Leo Fringilla Tempe Vitae Sit Amet Leo. Donec Imperdiet Tempus Placerat. Ultrices de pulvinar pelvinórico nunces. Morbi Vel Mi Pretium, Fermentum Lacus et, Viverra Tellus. Phasellus Sodales Libero Nec Dui Convallis, Sit Amet Fermentum Sapien Autotor. Vestiblum ante ipsum primis en faucibus orci luctus et ultrices Posuere cubilia curae; Sed eu elementum nibh, quis varius libero. </p> <p> morbi sed fermentum ipsum. Morbi A Orci Vulputate Tortor Ornare Blandit A Quis Orci. Donec Aliquam Sodales gravida. En UT Ullamcorper nisi, AC Pretium Velit. Vestibulum vitae lectus Volutpat, consecuente lorem sit amet, pulvinar tellus. En Tincidunt Vel Leo Eget Pulvinar. Curabitur A Eros Non Lacus Malesuada aliquam. Praesent et Tempus Odio. Entero un quam nunc. En Hab Hábitohesse Platea Dictumst. Aliquam Porta Nibh Nulla, et Mattis Turpis Placerat Eget. Pellentesque Dui Diamond, Pellenentesque Vel Gravida ID, Accumsan EU Magna. Sed A Semper Arcu, Ut Dignissim Leo. </p> <p> Sed vitae lobortis diam, id Molestie Magna. Aliquam consecuente ipsum quis est ultrices de dictum. Aenean Nibh Velit, Fringilla en Diam ID, Blandit Hendrerit Lacus. Donec Vehicula Rutrum le dice al huevo fermentum. Pellentesque Ac erat et Arcu Ornare Tincidunt. Aliquam Erat Volutpat. Vivamus lobortis urna quis gravida semper. En condimentum, est a faucibus luctus, mi dolor cursus mi, id vehículos arcu arriesgado un nibh. Pellentesque Blandit Sapien Lacus, Vel Vehicula Nunc Feugiat Sit Amet. </p> </div> </div> </body> </html>Los resultados son los siguientes:
Posicionamiento a través de CSS
En las dos formas anteriores de usar el complemento Aftix, debe localizar contenido a través de CSS. El complemento de navegación adicional (Aftix) cambia entre tres clases, cada una de las cuales presenta un estado específico: .Affix, .Affix-top y .Affix-Bottom. Siga los pasos a continuación para configurar su propio CSS para estos tres estados (no confiar en este complemento).
Al principio, el complemento agrega .Affix-top para indicar el elemento en su posición más alta. No se requiere posicionamiento CSS en este momento.
Al desplazarse a través de un elemento donde se agrega la navegación adicional (Afix), se debe activar la navegación adicional real (Afix). En este momento, .Affix reemplazará .Affix-top y establecerá la posición: fijo; (proporcionado por el código CSS de Bootstrap).
Si se define el desplazamiento inferior, cuando el pergamino alcanza esa posición, reemplace .Affix con .fix-fondo. Dado que el desplazamiento es opcional, si se establece el desplazamiento, se requiere un CSS apropiado para establecerse al mismo tiempo. En este caso, agregue la posición: Absoluto; si es necesario.
Opción
Hay algunas opciones que se pasan a través de propiedades de datos o JavaScript. La siguiente tabla enumera estas opciones:
Lo anterior es la explicación detallada del ejemplo de complemento de navegación adicional de Bootstrap (Affix) introducido por el editor. ¡Espero que sea útil para todos!