O plug -in adicional de navegação (afix) permite que um <div> seja fixado em algum lugar da página. Você também pode alternar entre ativar ou desligar o plug -in. Um exemplo comum são os ícones sociais. Eles começarão em algum lugar, mas quando a página clicar em uma marca, o <div> travará em algum lugar e não rolará junto com o restante da página.
Se você deseja fazer referência à funcionalidade do plug -in separadamente, é necessário fazer referência a afix.js. Ou, como mencionado no capítulo Visão geral do plug -in Bootstrap, você pode consultar o bootstrap.js ou versões compactadas do bootstrap.min.js.
uso
Você pode usar o plug-in de navegação (afix) anexado por meio de propriedades de dados ou via JavaScript.
Através dos atributos de dados: se você precisar adicionar um comportamento adicional de navegação (afixo) ao elemento, você só precisará adicionar dados-spy = "afixar" ao elemento que você precisa ouvir. Use desvios para definir ao alternar o bloqueio e o movimento dos elementos.
Exemplo
O exemplo a seguir demonstra como usar um plug -in adicional de navegação (afix) através do atributo de dados:
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <titter> Navegação anexada (afix) plug-in </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "Stylelesheet" <script " src = "/scripts/jquery.min.js"> </script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <style type = "text/css">/ * estilos personalizados */ul.av-tabs {width 140px; 1px Solid #DDD; Box-Shadow: 0 1px 4px rgba (0, 0, 0, 0,067);} ul.nav-tabs li {margin: 0; borda-top: 1px sólido #ddd;} ul.nav-tabs li: primeira direção {border-top: nenhum; 16px;border-radius: 0;}ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{color: #ffff;background: #0088cc;border: 1px solid #0088cc;}ul.nav-tabs li:first-child a{border-radius: 4px 4px 0 0;}ul.nav-tabs li:last-child A {Radio de borda: 0 0 4px 4px;} ul.nav-tabs.affix {top: 30px; / * Defina a posição superior do elemento fixado */} </style> </head> <corpo data-spy = "scroll" data-target = "#myscrollspy"> <div> <div> <h1> bootstrap afix </h1> </fix> </divrollspy "<ul Data-spy>" Afixspy </fix> "Afixspy =" Afixspy </h1> "Aflighx" Afix "Afixspy </h1> Aflighx" Afix "Afixspy </h1> </afix" Afixs-spy </h1> </afix "e" href = "#seção-1"> Parte 1 </a> </li> <li> <a href = "#seção-2"> Parte 2 </a> </li> <li> <a href = "#seção-3"> parte 3 </a> </li> <li> <a href = "#seção 4"> Part 4 </a> 5 </a> </li> </ul> </div> <div> <h2 id = "seção-1"> Parte 1 </h2> <p> Lorem ipsum dolor sit amet, constituir apiscing elit. Nam EU SEM TEMPO, VARIUS QUAM AT, LUCTUS DUI. Mauris Magna Metus, Dapibus Nec Turpis Vel, Semper Malesuada ante. Vestibulum ID Metus ac nisl bibendum scelerisque non non Purus. Sussendisse Varius Nibh non Aliquet Sagittis. Em Tincidunt Orci Sit AMETEMENTUM VESTIBULUM. Vivamus fermentum em Arcu em Aliquam. Quisque Aliquam Porta Odio em Fringilla. Vivamus Nisl Leo, Blandit no Bibendum UE, Tristique Eget Risk. Inteiro Aliqueta Quam Ut Elit Suscipit, ID Interdum Neque Porttitor. Inteiro Faucibus Ligula. Plelentresque eget nisi a mi suscipit tincidunt. Ut Tempus dictum risus. Plelentresque Viverra Sagittis Quam em Mattis. Sustendisse potenciali. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Phasellus Autor Velit em Lacus Blandit, Commodo Iaculis Justo Viverra. Etiam Vitae est Arcu. Mauris Vel Congue Dolor. Aliquam eget mi mi. FUSCE QUAM TORTOR, COMMODO ACDUIS DUIS QUIS QUE, BIBENDUM VIVERRA ERAT. Maecenas Mattis Lectus Enim, Quis Tincidunt DUI Molestie Euismod. Curabitur et diam Tristique, accumsan nunc ue, hendradeira Tellus. Etiam em Sagittis lectus. Sustendisse Ultrices Placera Accumsan. Mauris Quis Dapibus Orci. Em Dapibus Velit Blandit Pharetra Tincidunt. Quisque non sapien nec lacus condimentum facilisis uticulis enim. Sed viverra interdum bibendum. Donec acs solliclicitudin dolor. Sed Fringilla Vitae Lacus em Rútrum. Phasellus conguen vestibulum ligula sed consequeat. Nam Odio Tortor, Dictum Quis Malesuada em, Pellenentesque Vitae Orci. Vivamus Elementum, Felis UE Autor Lobortis, Diam Velit Egestas lacus, Quis fermentum Metus ante quis urna. Sed em facilisis libero. Cum sociis penatibus et Magnis Dis Parturient Montes, Nascetur Ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendradeira tincidunt ante. Vivamus SEM Augue, HendRerit non Sapien em, Mollis ornare Augue. Diamond Libero, Sodales Eget Sapien Vel, Porttitor Bibendum Enim. Donec sed nibh vitae lorem porttitor Blandit em nec ante. Peldelesque Vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam em Aliquam Lectus. Nam Vel Sapien diam. Donec Pharetra Id Arcu Egg Blandit. Proin Imperdiet Mattis Augue em Porttitor. Quisque tempus enim id lobortis feugiat. Sustendisse Tincidunt Riskus Quis Dolor Fringilla Blandit. Ut sed sapien no porttitor de Purus Lacinia. Nullam iaculis, felis um pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequeat 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 Temporal Egestas. Duis Luctus Turpis em Accumsan Tincidunt. Phasellus Riskus Risk, 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 Ultricies AC Ligula. Pellentresque Convallis elit nisi, id vulputado ipsum ullamcorper ut. CRAS AC Pulvinar Purus, AC Viverra est. Sustendisse potenciali. Inteiro Pelletsque Neque et Elementum Tempus. Bibendum curabitur em Ligula ut Rhoncus. Null a justo sed ligula porta semper eu quis enim. Pelenteresque PelenteSque, Metus em Facilisis Hendreit, Lectus velit facilisis leo, Quis volutpat turpis arcu quis enim. Nulla Viverra Lorem Elementum Interdum Ultricies. Sussendisse accumsan quam nec ante mollis tempus. Morbi Vel Accumsan Diamond, Eget Connallis Tellus. Sustendisse potenciali. </p> <hr> <h2 id = "seção-4"> Parte 4 </h2> <p> Sustendisse A Orci facilisis, Dignissim Tortor Vitae, ultrices mi. Vestíbulo a iaculis lacus. Phasellus vitae Connallis Ligula, NEC Volutpat Tellus. Vivamus sclerisque Mollis Nisl, NEC Vehicula Elit Egestas a. Sed luctus metus id mi gravida, faucilibus Connallis neque pretium. Maecenas Quis Sapien Ut Leo Fringilla Temporal Vitae Sit AMET LEO. Donec Imperdiet Tempus Placerat. Ultrices de pulvilhas Pullesesques. Ultrices nunc sed. Morbi vel mi pretium, Fermentum lacus et, Viverra Tellus. Phasellus Sodales Libero Nec Dui Connallis, Sit Amet Fermentum Sapien Autotor. Vestiblum ante ipsum primis em faucibus orci luctus et ultrices posse cubilia curae; Sed eu elementum nibh, quis varius libero. Plelentresque Egg Nisi A Mi Suscipit Tincidunt. Ut Tempus dictum risus. Plelentresque Viverra Sagittis Quam em Mattis. Sustendisse potenciali. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Phasellus Autor Velit em Lacus Blandit, Commodo Iaculis Justo Viverra. Etiam Vitae est Arcu. Mauris Vel Congue Dolor. Aliquam eget mi mi. FUSCE QUAM TORTOR, COMMODO AC DUI QUES, BIBENDUM VIVERRA ERAT. Maecenas Mattis Lectus Enim, Quis Tincidunt DUI Molestie Euismod. Curabitur et diam Tristique, accumsan nunc eu, hendradeira Tellus. Nunc Ornare Erat Quis Faucibus Molestie. Proin Malesuada Consepat Commodo. Mauris Iaculis, Eros Ut dapibus luctus, Massa Enim elementum purus, Sit AMET Tristique Purus Purus nec felis. Morbi vestibulum sapien eget Porta Pulvinar. Nam em quam diam. Proin Rhoncus, Felis Elementum acumsan dictum, Felis nisi vestibulum Tellus, ET Ultrices Risus Felis em Orci. Quisque vestibulum sem nisl, vel cone leo dictum nec. Cras eget est em velit sagittis ullamcorper velt et lectus. No HAC Habitasses Platea Dittumst. Etiam interdum iaculis velit, vel sollicitudin lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam, lorem libero hendradeira urna, faucibus rhoncus mossa nibh em felis. Curabitur AC Tempus Nulla, Ut Semper Erat. Vivamus PORTA ULLAMCORPER SEM, ORNARE EGESTAS MAURIS FACILISIS ID. FUSCE Porttitor Eros em Magna Luctus, Non Nulla Eleifend. Aenean Porttitor Feugiat Dolor Sit AMET FACILISIS. Plelentresque Venenatis magna et Riskus Commodo, um comando turpis gravida. Nam Mollis Massa Dapibus Urna Aliqueta, Quis Iaculis Elit Sodales. Sed eget ornare orci, ue malesuada justo. Nunc Lacus Augue, Dictum Quis DUI ID, Lacinia Congu Quam. Nulla Sem Sem, Aliquam NEC Dolor AC, Tempus Convallis Nunc. Interdum et Malesuada Fames AC Ante ipsum Primis em Faucibus. Nulla Suscipit Connallis iaculis. Quisque eget Commodo Ligula. PraEsent Leo Dui, facilisis quis eleifend in, aliquet vitae nunc. Sustendisse Fermentum Odio acs Massa Ultricies PellenenteSque. Fusce UE Suscipit Massa. Null Ultrices Nisl Risk, em Viverra Libero egestas Sit AMET. Etiam Porttitor Dolor non Eros Pulvinar Malesuada. Vestibulum Sit Amet Est Mollis Nulla Tempus Aliquete. Praesent LUCTUS HENDRERIT ARCU NONOREET. Morbi consegue placerat magna, AC ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justos porta volutpat. Inteiro Nunc Nulla, Viverra Ut Sem, Non, Sclerrisque Vehicula Arcu. FUSCE BIBENDUM CONVALLIS AUGUE SIT AMET LOBORTIS. Cras Porta Urna Turpis, Sodales Lobortis Purus Apiscing Id. MECENAS ULLAMCORPER, TURPIS SUSCIPIT PELENTESCO FRINGILLA, MASSA LACUS PULVARN MI, NEC Dignissim Velit Arcu Eget Purus. Nam em Dapibus Tellus, Eget euismod nisl. Ut eget venenatis sapien. Vivamus Vulputate Varius Mauris, Vel Varius Nisl facilisis AC. Nulla aliqueta apenas um ornare nibh, ue cugue neque rutrum. Vestíbulo a iaculis lacus. Phasellus vitae Connallis Ligula, NEC Volutpat Tellus. Vivamus sclerisque Mollis Nisl, NEC Vehicula Elit Egestas a. Sed luctus metus id mi gravida, faucibus Connallis neque pretium. Maecenas Quis Sapien Ut Leo Fringilla Temporal Vitae Sit AMET LEO. Donec Imperdiet Tempus Placerat. Ultrices de pulvilhas Pullesesques. Ultrices nunc sed. Morbi vel mi pretium, Fermentum lacus et, Viverra Tellus. Phasellus Sodales Libero Nec Dui Connallis, Sit AMET FERMENTUM SAPIEN AUCOR. Vestibulum ante ipsum primis em faucibus orci luctus et ultrices postereere cubilia curae; Sed eu elementum nibh, quis varius libero. </p> <p> morbi sed fermentum ipsum. Morbi um tortor de vulpicação orci ornare Blandit a quis orci. Donec Aliquam Sodales Gravida. Em Ut Ullamcorper nisi, AC Pretium Velit. Vestibulum vitae lectus volutpat, consequente lorem Sit AMET, Pulvinar Tellus. Em Tincidunt Vel Leo Eget Pulvinar. Curabitur A Eros non lacus Malesuada Aliquam. Praesent et tempus odio. Inteiro A Quam Nunc. Em Hab Habitasses Platea Dittumst. Aliquam Porta Nibh Nulla, et Mattis Turpis Placerat Eget. Plelentresque DUI Diamond, PELENTESQUE VEL GREIVA ID, Accumsan eu magna. Sed um semper arcu, ut dignissim leo. Aliquam consequeio ipsum quis est dictum ultrices. Aenean Nibh Velit, Fringilla em Diam Id, Blandit Hendreit lacus. Donec Vehicula Rutrum diz a Egg Fermentum. Plelentresque ac erat et arcu ornare tincidunt. Aliquam Erat Volutpat. Vivamus lobortis urna quis gravida semper. Em Condimentum, est um faucibus luctus, mi dolor cursus mi, idicula arcu arcu um nibh. Peldelesque Blandit Sapien lacus, Vel Vehicula Nunc Feugiat Sit AMET.Os resultados são os seguintes:
Através do JavaScript: você pode adicionar manualmente a navegação adicional (afixo) a um elemento através do JavaScript, como mostrado abaixo:
$ ('#myAffix'). Afix ({offset: {top: 100, inferior: function () {return (this.bottom = $ ('. bs-footer').Exemplo
O exemplo a seguir demonstra como usar um plug -in adicional de navegação (afix) via JavaScript:
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <titter> Navegação anexada (afix) plug-in </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "Stylelesheet" <script " src = "/scripts/jquery.min.js"> </script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <style type = "text/css">/ * estilos personalizados */ul.av-tabs {width 140px; 1px Solid #DDD; Box-Shadow: 0 1px 4px rgba (0, 0, 0, 0,067);} ul.nav-tabs li {margin: 0; borda-top: 1px sólido #ddd;} ul.nav-tabs li: primeira direção {border-top: nenhum; 16px;border-radius: 0;}ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{color: #ffff;background: #0088cc;border: 1px solid #0088cc;}ul.nav-tabs li:first-child a{border-radius: 4px 4px 0 0;}ul.nav-tabs li:last-child A {Radio de borda: 0 0 4px 4px;} ul.nav-tabs.affix {top: 30px; / * Defina a posição superior do elemento fixado */} </style> <script type = "text/javascript"> $ (document) .ready (function () {$ ("#mynav"). Afix ({offset: {top: 125}});}); </script> </head> <body Data-spy = 125}});}); data-alget = "#myscrollspy"> <div> <div> <h1> bootstrap afix </h1> </div> <div> <div id = "myscrollspy"> <ul id = "mynav"> <li> II</a></li><li><a href="#section-3">Part I</a></li><li><a href="#section-4">Part IV</a></li><li><a href="#section-5">Part 5</a></li></ul></div><div><h2 id="section-1">Part 1 </h2> <p> lorem ipsum dolor sit amet, consistur adipiscing elit. Nam EU SEM TEMPO, VARIUS QUAM AT, LUCTUS DUI. Mauris Magna Metus, Dapibus Nec Turpis Vel, Semper Malesuada ante. Vestiblum Metus ac nisl bibendum scelerisque non non purus. Sussendisse Varius Nibh non Aliquet Sagittis. Em Tincidunt Orci Sit AMETEMENTUM VESTIBULUM. Vivamus fermentum em Arcu em Aliquam. Quisque Aliquam Porta Odio em Fringilla. Vivamus Nisl Leo, Blandit em Bibendum eu, Tristique Eget Riskus. Inteiro Aliqueta Quam Ut Elit Suscipit, ID Interdum Neque Porttitor. Inteiro Faucibus Ligula. Plelentresque eget nisi a mi suscipit tincidunt. Risco de dicto da UT Tempus. Plelentresque Viverra Sagittis Quam em Mattis. Sustendisse potenciali. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Phasellus Autor Velit em Lacus Blandit, Commodo Iaculis Justo Viverra. Etiam Vitae est Arcu. Mauris Vel Congue Dolor. Aliquam eget mi mi. FUSCE QUAM TORTOR, COMMODO AC DUI QUES, BIBENDUM VIVERRA ERAT. Maecenas Mattis Lectus Enim, Quis Tincidunt DUI Molestie Euismod. Curabitur et diam Tristique, accumsan nunc ue, hendradeira Tellus. Etiam em Sagittis lectus. Sustendisse Ultrices Placera Accumsan. Mauris Quis Dapibus Orci. Em Dapibus Velit Blandit Pharetra Tincidunt. Quisque non sapien nec lacus condimentum facilisis uticulis enim. Sed viverra interdum bibendum. Donec acs solliclicitudin dolor. Sed Fringilla Vitae Lacus em Rútrum. Phasellus conguen vestibulum ligula sed consequeat. Nam Odio Tortor, Dictum Quis Malesuada em, Pellenentesque Vitae Orci. Vivamus elementum, Felis eu autor lobortis, diam velit egstas lacus, quis fermentum metus ante quis urna. Sed em facilisis libero. Cum sociis penatibus et Magnis Dis Parturient Montes, Nascetur Ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendradeira tincidunt ante. Vivamus SEM Augue, HendRerit non Sapien em, Mollis ornare Augue. Diamond Libero, Sodales Eget Sapien Vel, Porttitor Bibendum Enim. Donec sed nibh vitae lorem porttitor Blandit em nec ante. Peldelesque Vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam em Aliquam Lectus. Nam Vel Sapien diam. Donec Pharetra Id Arcu Egg Blandit. Proin Imperdiet Mattis Augue em Porttitor. Quisque tempus enim id lobortis feugiat. Sustendisse Tincidunt Riskus Quis Dolor Fringilla Blandit. Ut sed sapien no porttitor de Purus Lacinia. Nullam iaculis, felis um pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequeat eros. Sed id pretium nisl. Curabitur Dolor Nisl, Laoreet Vitae Aliquam ID, Tincidunt Sit Amet Mauris. Mauris Pharetra Feugiat Ante Id Lacinia. Etiam Faucibus Mauris ID Temporal EGSTAS EGSTAS. Duis Luctus Turpis em Accumsan Tincidunt. Phasellus Riskus 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 pelletesque Ultricies AC Ligula. Pellentresque Convallis elit nisi, id vulputado ipsum ullamcorper ut. CRAS AC Pulvinar Purus, AC Viverra est. Sustendisse potenciali. Inteiro PelenteSque Neque et Elementum Tempus. Bibendum curabitur em Ligula ut Rhoncus. Null a apenas sed ligula porta semper eu quis enim. Pelenteresque PelenteSque, Metus em Facilisis Hendreit, Lectus velit facilisis leo, Quis volutpat turpis arcu quis enim. Nulla Viverra Lorem Elementum Interdum Ultricies. Sussendisse accumsan quam nec ante mollis tempus. Morbi Vel Accumsan Diamond, Eget Connallis Tellus. Sustendisse potenciali. </p> <hr> <h2 id = "seção-4"> Parte 4 </h2> <p> Sustendisse A Orci facilisis, Dignissim Tortor Vitae, ultrices mi. Vestíbulo a iaculis lacus. Phasellus vitae Connallis Ligula, NEC Volutpat Tellus. Vivamus sclerisque Mollis Nisl, NEC Vehicula Elit Egestas a. Sed luctus metus id mi gravida, faucibus Connallis neque pretium. Maecinas quis sapien ut leo fringilla temporal vitae sit amet leo. Donec Imperdiet Tempus Placerat. Ultrices de pulvilhas Pullesesques. Ultrices nunc sed. Morbi vel mi pretium, Fermentum lacus et, Viverra Tellus. Phasellus Sodales Libero Nec Dui Connallis, Sit Amet Fermentum Sapien Autotor. Vestiblum ante ipsum primis em faucibus orci luctus et ultrices posse cubilia curae; Sed eu elementum nibh, quis varius libero. Plelentresque eget nisi a mi suscipit tincidunt. Ut Tempus dictum risus. Plelentresque Viverra Sagittis Quam em Mattis. Sustendisse potenciali. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Phasellus Autor Velit em Lacus Blandit, Commodo 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, hendradeira Tellus. Nunc Ornare Erat Quis Faucibus Molestie. Proin Malesuada Consepat Commodo. Mauris Iaculis, Eros Ut dapibus luctus, Massa Enim elementum purus, Sit AMET Tristique Purus Purus nec felis. Morbi vestibulum sapien eget Porta Pulvinar. Nam em quam diam. Proin Rhoncus, Felis Elementum acumsan dictum, Felis nisi vestibulum Tellus, ET Ultrices arrisque Felis em Orci. Quisque vestibulum sem nisl, vel cone leo dictum nec. Cras eget est em velit sagittis ullamcorper velt et lectus. No HAC Habitasses Platea Dittumst. Etiam interdum iaculis velit, vel sollicitudin lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam, lorem libero hendradeira urna, faucibus rhoncus mossa nibh em felis. Curabitur AC Tempus Nulla, Ut Semper Erat. Vivamus PORTA ULLAMCORPER SEM, ORNARE EGESTAS MAURIS FACILISIS ID. FUSCE Porttitor Eros em Magna Luctus, Non Nulla Eleifend. Aenean Porttitor Feugiat Dolor Sit AMET FACILISIS. Peldelesque Venenatis Magna et Risus Commodo, um comando turpis gravida. Nam Mollis Massa Dapibus Urna Aliqueta, Quis Iaculis Elit Sodales. Sed eget ornare orci, ue malesuada justo. Nunc Lacus Augue, Dictum Quis DUI ID, Lacinia Congu Quam. Nulla Sem Sem, Aliquam NEC Dolor AC, Tempus Convallis Nunc. Interdum et Malesuada Fames AC Ante ipsum Primis em Faucibus. Nulla Suscipit Connallis iaculis. Quisque eget Commodo Ligula. PraEsent Leo Dui, facilisis quis eleifend in, aliquet vitae nunc. Sustendisse Fermentum Odio acs Massa Ultricies PellenenteSque. Fusce UE Suscipit Massa. Null Ultrices Nisl Risk, em Viverra Libero egstas Sit AMET. Etiam Porttitor Dolor non Eros Pulvinar Malesuada. Vestibulum Sit Amet Est Mollis Nulla Tempus Aliquete. Praesent LUCTUS HENDRERIT ARCU NONOREET. Morbi consegue placerat magna, AC ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat. Inteiro Nunc Nulla, Viverra Ut Sem, Non, Sclerrisque Vehicula Arcu. FUSCE BIBENDUM CONVALLIS AUGUE SIT AMET LOBORTIS. Cras Porta Urna Turpis, Sodales Lobortis Purus Apiscing Id. MECENAS ULLAMCORPER, TURPIS SUSCIPIT PELENTESCO FRINGILLA, MASSA LACUS PULVARN MI, NEC Dignissim Velit Arcu Eget Purus. Nam em Dapibus Tellus, Eget euismod nisl. Ut eget venenatis sapien. Vivamus Vulputate Varius Mauris, Vel Varius Nisl facilisis AC. Nulla aliqueta apenas um ornare nibh, ue cugue neque rutrum. Vestíbulo a iaculis lacus. Phasellus vitae Connallis Ligula, NEC Volutpat Tellus. Vivamus sclerisque Mollis Nisl, NEC Vehicula Elit Egestas a. Sed luctus metus id mi gravida, faucibus Connallis neque pretium. Maecenas Quis Sapien Ut Leo Fringilla Temporal Vitae Sit AMET LEO. Donec Imperdiet Tempus Placerat. Ultrices de pulvilhas Pullesesques. Ultrices nunc sed. Morbi vel mi pretium, Fermentum lacus et, Viverra Tellus. Phasellus Sodales Libero Nec Dui Connallis, Sit Amet Fermentum Sapien Autotor. Vestiblum ante ipsum primis em faucibus orci luctus et ultrices posse cubilia curae; Sed eu elementum nibh, quis varius libero. </p> <p> morbi sed fermentum ipsum. Morbi um tortor de vulpicação orci ornare Blandit a quis orci. Donec Aliquam Sodales Gravida. Em Ut Ullamcorper nisi, AC Pretium Velit. Vestibulum vitae lectus volutpat, consequente lorem Sit AMET, Pulvinar Tellus. Em Tincidunt Vel Leo Eget Pulvinar. Curabitur A Eros non lacus Malesuada Aliquam. Praesent et tempus odio. Inteiro A Quam Nunc. Em Hab Habitasses Platea Dittumst. Aliquam Porta Nibh Nulla, et Mattis Turpis Placerat Eget. Plelentresque DUI Diamond, Pellenentesque Vel Gravida ID, Accumsan eu magna. Sed um semper arcu, ut dignissim leo. Aliquam consequeio ipsum quis est dictum ultrices. Aenean Nibh Velit, Fringilla em Diam Id, Blandit Hendreit lacus. Donec Vehicula Rutrum diz a Egg Fermentum. Plelentresque ac erat et arcu ornare tincidunt. Aliquam Erat Volutpat. Vivamus lobortis urna quis gravida semper. Em Condimentum, est um faucibus luctus, mi dolor cursus mi, idicula arcu arcu um nibh. Peldelesque Blandit Sapien lacus, Vel Vehicula Nunc Feugiat Sit AMET.Os resultados são os seguintes:
Posicionamento via CSS
Nas duas maneiras acima para usar o plug-in de afix, você deve localizar o conteúdo via CSS. A navegação adicional (afix) troca entre três classes, cada uma das quais apresenta um estado específico: .fafix, .fafix-top e .affix-bottom. Siga as etapas abaixo para configurar seu próprio CSS para esses três estados (não confiando neste plug -in).
No início, o plug-in adiciona .fafix-top para indicar o elemento na posição superior. Nenhum posicionamento CSS é necessário no momento.
Ao percorrer um elemento em que a navegação adicional (afixo) é adicionada, a navegação adicional real (afixo) deve ser acionada. Neste momento, o .Affix substituirá .fafix-top e definirá a posição: corrigido; (fornecido pelo código CSS da Bootstrap).
Se o deslocamento inferior for definido, quando o pergaminho atingir essa posição, substitua .fixo pelo .ffix-Bottom. Como o deslocamento é opcional, se o deslocamento estiver definido, é necessário que um CSS apropriado seja definido ao mesmo tempo. Nesse caso, adicione posição: absoluto; se necessário.
Opções
Existem algumas opções que são passadas pelas propriedades de dados ou JavaScript. A tabela a seguir lista estas opções:
O exposto acima é a explicação detalhada do exemplo de plug-in adicional de navegação (afixo) de Bootstrap (Affix) introduzido pelo editor. Espero que seja útil para todos!