Дополнительный плагин навигации (Affix) позволяет закреплять <div> где -то на странице. Вы также можете переключиться между включением или выключением, используя плагин. Общим примером являются социальные значки. Они начнутся где -то, но когда страница нажимает на отметку, <div> где -то заблокируется и не будет прокручивать вместе с остальной частью страницы.
Если вы хотите ссылаться на функциональность плагина отдельно, вам необходимо ссылаться на Affix.js. Или, как упомянуто в главе обзора плагинов Bootstrap, вы можете обратиться к Bootstrap.js или сжатым версиям Bootstrap.min.js.
Использование
Вы можете использовать подключаемый подключатель навигации (Affix) с помощью свойств данных или через JavaScript.
Через атрибуты данных: если вам нужно добавить дополнительное навигационное (аффиксное) поведение в элемент, вам нужно только добавить Data-spy = «Affix» к элементу, который вам необходимо прослушать. Используйте смещения, чтобы определить, когда блокировка и движение переключайте элементы.
Пример
В следующем примере демонстрируется, как использовать дополнительный плагин навигации (Affix) через атрибут данных:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> Bootstrap прикрепленная навигационная навигация (Affix) Plug-in </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "styleshepe"> <script/css/bootstrap.min.css "rol =" src = "/scripts/jquery.min.js"> </script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <стиль типа = "text/css">/ * Custom Styles */ul.nav-tabs {width: 140px; margin-top: 20px; #ddd; Box-Shadow: 0 1px 4px rgba (0, 0, 0, 0,067);} ul.nav-tabs li {маржа: 0; граница: 1px solid #ddd;} ul.nav-tabs li: first-chid 0;} ul.nav-tabs li.active a, ul.nav-tabs li. 4px 4px;} ul.nav-tabs.affix {top: 30px; / * Установите верхнюю позицию закрепленного элемента */} </style> </head> <body data spy = "scroll" data-target = "#myscrollspy"> <div> <div> <h1> bootstrap </h1> </div> <div> <div id = "myscrollspy"> <ul Data-spy = "Affix" data-off = "liScrolspy"> <ul Data-spy = "Affix" affix "off-of-topsese ="> " href = "#раздел 1"> Часть 1 </a> </li> <li> <a href = "#раздел-2"> Часть 2 </a> </li> <li> <a href = "#раздел-3"> Часть 3 </a> </li> <li> <a href = "#section-4"> Часть 4 </a> </li> <li> <a href = "#section-4" 5 </a> </li> </ul> </div> <div> <h2 id = "section-1"> Часть 1 </h2> <p> lorem ipsum dolor sit amet, Consuretur apiscing elit. NAM EU SEM TEMP, VARIUS CUAM AT, LUCTUS DUI. Маурис Магна Ммус, Dapibus nec Turpis Vel, Semper Malesuada Ante. Весенбул идентификатор METUS AC NISL BIBENDUM SCELERISQUE NON NON PURUS. Suprendisse varius nibh non aliquet sagittis. В Tincidunt orci Sit Amet Elementum Vestibulum. Vivamus Fermentum в Arcu в Аликуме. Quisque Aliquam Porta Odio в Фринглле. Вивамус Нисла Лео, Blandit at Bibendum EU, Tristique Eceget Risk. Integer aliquet Quam ut Elit Suscipit, ID Interdum Neque Porttitor. Integer faucibus ligula. </P> <p> Vestibulum Quis Quam Ut Magna emesscibus faucibus. Pallentesque Eget Nisi A Mi Suscipit Tincidunt. UT Tempus Dictum Risus. Pallentesque Viverra Sagittis Quam в Маттисе. SUSPERNDISSE POLILICEI. Aliquam Sit amet gravida nibh, farsilisis gravida odio. Phasellus Autor Velit в Lacus Blandit, Commodo Iaculis Justo Viverra. Etiam vitae est arcu. Маурис Вэл Кондиг Долор. Aliquam Eget Mi Mi. Fusce Quam Tortor, Commodo acduis duis Quis, Bibendum viverra erat. Maecenas Mattis Lectus Enim, Quis Tincidunt Dui Rolestie EuIsmod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. Etiam в лекте сагиттиса. Suprendisse Ultrices Placera Accumsan. Маурис Куис Дапибус Орси. В Dapibus Velit Blandit Pharetra Tincidunt. Quisque Non Sapien Necus Lacus Cendimentum Farcilisis ut Iaculis Enim. Sed viverra interdum bibendum. Donec AC Sollicitidin Dolor. SED Fringilla Vitae Lacus в Рутруме. Phasellus Congue Vestibulum Ligula Sed. Nam Odio Tortor, Dictum Quis Malesuada AT, Pellenentesque Vitae Orci. Vivamus elementum, Felis Eu Autor Lobortis, Diam Velitas Lacus, Quis Fermentum Metus ante Quis urna. Сед в Фаризисе Либеро. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc Orci Dolor, Rolestie Nec nibh in, Hendrerit Tincidunt Ante. Vivamus sem Augue, Hendrerit non Sapien In, Mollis Ornare Augue. </P> <hr> <h2 id = "Раздел 3"> Часть III </h2> <p> Integer pulvinar leo id riskus pelletesque vestibulum. Sed Diamond Libero, Sodales Eget Sapien Vel, Porttitor Bibendum Enim. Donec Sed Nibh Vitae Loorem Porttitor Blandit в Nec. Pallentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada sedimentum. Etiam в лекте Aliquam. NAM VEL SAPIEN DIAM. Donec Pharetra Id Arcu Egg Blandit. PROIN PROIN INSERPDIET MATTIS AUGUE в Портаторе. Quisque Tempus Enim Id Lobortis Feugiat. Survendisse Tincidunt Riskus Quis Dolor Fringilla Blandit. Ут Сед Сапиен в Purus Lacinia Porttitor. Nullam Iaculis, Felis A Pretium Ornare, Dolor Nisl Semper Tortor, Vel Sagittis lacus est emessat Atros. SED ID Pretium nisl. Curabitur Dolor Nisl, Laoreet vitae aliquam id, tincidunt sit amet mauris. </P> <p> phasellus vitae suscipit justo. Маурис Фаретра Фейугиат Анте ID Lacinia. Etiam faucibus mauris id временные эгесты. Duis luctus turpis в Accumsan Tincidunt. Риск 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 PELLETESQUE ULTRICES AC LIGULA. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras AC Pulvinar Purus, ac viverra est. Целочисленное пеллетск Neque et elementum Tempus. Curabitur Bibendum в лигула Ut Rhoncus. </P> <p> quisque pharetra velit id velit iaculis pretium. Nullam justo sed ligula porta semper eu quis enim. Pallentesque Pelentesque, METUS в FARISISIS HENDRERIT, Lectus Velit Facilisis Leo, Quis Volutpat Turpis arcu Quis enim. Nulla viverra Lorem Elementum Ultricies. Suprendisse Accumsan Quam Nec Ante Mollis Tempus. Morbi Vel Accumsan Diamond, E -get Convallis Tellus. Supessendisse palipenti. Весенбул якулис лакуса. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus Sclerisque Mollis Nisl, NEC ETHICULA ELITAS A. SED LUCTUS METUS ID MI GRAVIDA, FAUCILIBUS CONVALLIS NEQUE PREAIM. Maecenas Quis Sapien Ut Leo Fringilla Временная витация Sit Amet Leo. Donec Imperdiet Tempus Placerat. Pellentesque pulvinar ultrices 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 в сфере Faucibus orci et ultrices posuere cubilia curae; Sed emementum nibh, quis varius libero. </P> <p> vestiblum Quis Quam ut Magna emess at wecibus. Пеллентеск яйцо низи ми сусипит Тинсидунт. UT Tempus Dictum Risus. Pallentesque Viverra Sagittis Quam в Маттисе. SUSPERNDISSE POLILICEI. Aliquam Sit amet gravida nibh, farsilisis gravida odio. Phasellus Autor Velit в Lacus Blandit, Commodo Iaculis Justo Viverra. Etiam vitae est arcu. Маурис Вэл Кондиг Долор. Aliquam Eget Mi Mi. Fusce Quam Tortor, Commodo ac dui Quis, Bibendum viverra erat. Maecenas Mattis Lectus Enim, Quis Tincidunt Dui Rolestie EuIsmod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. Nunc Ornare erat Quis Faucibus olestie. PROIN MALESUADA. Mauris iaculis, Eros ut Dapibus luctus, Massa Enim elementum Purus, Sit amet tristique purus purus nec felis. Morbi Vestibulum Sapien Eget Porta Pulvinar. Нам в Quam Diam. Proin Rhoncus, Felis elementum Dictum, Felis nisi vestibulum tellus и et ultrices risus felis в Orci. Quisque vetibulum sem nisl, vel congue leo dictum nec. CRAS EST EST В VELIT SAGITTIS ULLAMCORPER VEL ET LECTUS. В HAC Habitasse Platea Dickumst. Etiam Interdum iaculis Velit, Vel Sollicitinin Lorem Feugiat Sit Amet. Etiam Luctus, Quam Sed Sodales Aliquam, Lorem Libero Hendrerit Urna, Faucibus rhoncus massa nibh в Фелисе. Curabitur ac Tempus Nulla, Ut Semper Erat. Vivamus porta ullamcorper sem, ornare eestas mauris farsilisis id. Fusce Porttitor Eros в Magna Luctus, Non Congue Nulla Eleifend. Aenean Porttitor Feugiat Dolor Sit Amet FARISISIS. Pellentesque venenatis Magna et Riskus Commodo, Commodo Turpis Gravida. Nam Mollis Massa Dapibus urna aliquet, Quis iaculis Elit Sodales. Sed Emetge Ornare Orci, Eu Malesuada Justto. Nunc Lacus Augue, Dictum Quis dui Id, Lacinia Congue Quam. Nulla Sem, Aliquam Nec Dolor AC, Tempus convallis Nunc. Interdum et Malesuada Fames Ac Ante Ipsum primis в красе. Nulla Suscipit convallis iaculis. Квинк Эйг Коммодо Лигула. Presest Leo Dui, FARISISIS QUIS ELEIFEND IN, Aliquet Vitae Nunc. Survendisse Fermentum Odio AC Massa Ultricies Pellenentesque. Fusce eu suscipit massa. </P> <hr> <h2 id = "section 5"> Часть 5 </h2> <p> nam eget purus nec est consument eformula. Nullam ultrices nisl риск, в viverra libero egestas sit. Etiam Porttitor Dolor Non Eros Pulvinar Malesuada. Весенбулям сидеть амит est mollis nulla tempus aliquet. Presesent Luctus hendrerit arcu non laoreet. Morbi expcsent Placerat Magna, AC Ornare Odio Sagittis Sed. DONEC VITAE ULLAMCORPER PURUS. Vivamus non metus ac rasta volutpat. </P> <p> vivamus mattis accumsan erat, vel convallis риск Pretium nec. Целочисленное Nunc Nulla, Viverra UT SEM Non, Sclerisque efficula 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. Нам в Дапибусе Теллус, Эйз Эймод Нисл. UT EGETENTATIS SAPIEN. Vivamus vulpatate varius mauris, vel varius nisl farsilisis ac. Nulla aliquet просто nibh ornare, eu congue neque rutrum. Весенбул якулис лакуса. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus Sclerisque Mollis Nisl, NEC ETHICULA ELITAS A. SED LUCTUS METUS ID MI GRAVIDA, FAUCIBUS CONVALLIS NEQUE PREAIM. Maecenas Quis Sapien Ut Leo Fringilla Временная витация Sit Amet Leo. Donec Imperdiet Tempus Placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi Vel Mi Pretium, Fermentum Lacus et, Viverra Tellus. Phasellus Sodales libero nec dui convallis, sit amet fermentum sapien auctor. Весенбул ипсум primis в сфере Faucibus oructus et ultrices posuere cubilia curae; Sed elementum nibh, quis varius libero. </P> <p> morbi sed fermentum ipsum. Morbi a orci вульпутат сухожительный орган Blandit Quis orci. Donec Aliquam Sodales Gravida. В UT Ullamcorper nisi, AC Pretium Velit. Vestibulum vitae Lectus volutpat, следствие, Lorem sit amet, pulvinar tellus. В Tincidunt Vel Leo Eget Pulvinar. Curabitur A Eros non lacus malesuada aliquam. Прессент и темпус Одио. Целое число Quam Nunc. В Hab Habitasse Platea Dickumst. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque Dui Diamond, Pelentesque levdavide Id, Accumsan Eu Magna. SED A SEMPER ARCU, UT DIGINISSIM LEO. Aliquam ancess At Ipsum Quis est Dictum Ultrices. Aenean nibh Velit, fringilla in diam id, blandit hendrerit lacus. Donec athicula rutrum рассказывает яйца Fermentum. Pallentesque ac erat et arcu ornare tincidunt. Aliquam erat Volutpat. Vivamus lobortis urna Quis gravida semper. В пристройке, EST A Faucibus Luctus, Mi Dolor Cursus Mi, Id efericula arcu рискует nibh. Pellentesque blandit sapien lacus, vel efericula nunce feugiat sit amet. </P> </div> </div> </div> </body> </html>Результаты следующие:
Через JavaScript: вы можете вручную добавить дополнительную навигацию (аффикс) к элементу через JavaScript, как показано ниже:
$ ('#myaffix'). Affix ({offset: {top: 100, внизу: function () {return (this.bottom = $ ('.. Bs-foter'). OuterHeight (true))}}})Пример
В следующем примере демонстрируется, как использовать дополнительный плагин навигации (аффикс) через JavaScript:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> Bootstrap прикрепленная навигационная навигация (Affix) Plug-in </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "styleshepe"> <script/css/bootstrap.min.css "rol =" src = "/scripts/jquery.min.js"> </script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <стиль типа = "text/css">/ * Custom Styles */ul.nav-tabs {width: 140px; margin-top: 20px; #ddd; Box-Shadow: 0 1px 4px rgba (0, 0, 0, 0,067);} ul.nav-tabs li {маржа: 0; граница: 1px solid #ddd;} ul.nav-tabs li: first-chid 0;} ul.nav-tabs li.active a, ul.nav-tabs li. 4px 4px;} ul.nav-tabs.affix {top: 30px; / * Установите верхнюю позицию закрепленного элемента */} </style> <script type = "text/javascript"> $ (document) .ready (function () {$ ("#mynav"). Affix ({offset: {top: 125}});}); </script> </head> <body data spy = "scroll");}); data-target = "#myscrollspy"> <div> <div> <h1> bootstrap Affix </h1> </div> <div> <div id = "myscrollspy"> <ul id = "mynav"> <li> <a href = "#раздел-1"> Часть I </li> <li> <a href = "#раздел-1"> Часть I </a> </li> <li> Ii </a> </li> <li> <a href = "#section-3"> Часть I </a> </li> <li> <a href = "#section-4"> Часть IV </a> </li> <li> <a href = "#section-5"> Часть 5 </a> </li> </ul> </div> <d Div> <h2 Id ID = " 1 </h2> <p> lorem ipsum dolor sit amet, CongineTur adipiscing Elit. NAM EU SEM TEMP, VARIUS CUAM AT, LUCTUS DUI. Маурис Магна Ммус, Dapibus nec Turpis Vel, Semper Malesuada Ante. Vestiblum Id Metus ac nisl bibendum scelerisque non non purus. Suprendisse varius nibh non aliquet sagittis. В Tincidunt orci Sit Amet Elementum Vestibulum. Vivamus Fermentum в Arcu в Аликуме. Quisque Aliquam Porta Odio в Фринглле. Вивамус Нисла Лео, Blandit at Bibendum Eu, Tristique EgeGetus. Integer aliquet Quam ut Elit Suscipit, ID Interdum Neque Porttitor. Integer faucibus ligula. </P> <p> Vestibulum Quis Quam Ut Magna emesscibus faucibus. Pallentesque Eget Nisi A Mi Suscipit Tincidunt. UT Tempus Dictum Risk. Pallentesque Viverra Sagittis Quam в Маттисе. SUSPERNDISSE POLILICEI. Aliquam Sit amet gravida nibh, farsilisis gravida odio. Phasellus Autor Velit в Lacus Blandit, Commodo Iaculis Justo Viverra. Etiam vitae est arcu. Маурис Вэл Кондиг Долор. Aliquam Eget Mi Mi. Fusce Quam Tortor, Commodo ac dui Quis, Bibendum viverra erat. Maecenas Mattis Lectus Enim, Quis Tincidunt Dui Rolestie EuIsmod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. Etiam в лекте сагиттиса. Suprendisse Ultrices Placera Accumsan. Маурис Куис Дапибус Орси. В Dapibus Velit Blandit Pharetra Tincidunt. Quisque Non Sapien Necus Lacus Cendimentum Farcilisis ut Iaculis Enim. Sed viverra interdum bibendum. Donec AC Sollicitidin Dolor. SED Fringilla Vitae Lacus в Рутруме. Phasellus congue Vestibulum Ligula 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. Сед в Фаризисе Либеро. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc Orci Dolor, Rolestie Nec nibh in, Hendrerit Tincidunt Ante. Vivamus sem Augue, Hendrerit non Sapien In, Mollis Ornare Augue. </P> <hr> <h2 id = "Раздел 3"> Часть III </h2> <p> Integer pulvinar leo id riskus pelletesque vestibulum. Sed Diamond Libero, Sodales Eget Sapien Vel, Porttitor Bibendum Enim. Donec Sed Nibh Vitae Loorem Porttitor Blandit в Nec. Pallentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada sedimentum. Etiam в лекте Aliquam. NAM VEL SAPIEN DIAM. Donec Pharetra Id Arcu Egg Blandit. PROIN PROIN INSERPDIET MATTIS AUGUE в Портаторе. Quisque Tempus Enim Id Lobortis Feugiat. Survendisse Tincidunt Riskus Quis Dolor Fringilla Blandit. Ут Сед Сапиен в Purus Lacinia Porttitor. Nullam Iaculis, Felis A Pretium Ornare, Dolor Nisl Semper Tortor, Vel Sagittis lacus est emessat Atros. SED ID Pretium nisl. Curabitur Dolor Nisl, Laoreet vitae aliquam id, Tincidunt sit amet mauris. </P> <p> phasellus vitae suscipit justto. Маурис Фаретра Фейугиат Анте ID Lacinia. Etiam faucibus mauris id временный egstas. Duis luctus turpis в 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 ULTRICES AC LIGULA. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras AC Pulvinar Purus, ac viverra est. Целое число Pelentesque Neque et elementum tempus. Curabitur Bibendum в лигула Ut Rhoncus. </P> <p> quisque pharetra velit id velit iaculis pretium. Nullam A Just Sed Ligula Porta Semper Eu Quis Enim. Pallentesque Pelentesque, METUS в FARISISIS HENDRERIT, Lectus Velit Facilisis Leo, Quis Volutpat Turpis arcu Quis enim. Nulla viverra Lorem Elementum Ultricies. Suprendisse Accumsan Quam Nec Ante Mollis Tempus. Morbi Vel Accumsan Diamond, E -get Convallis Tellus. Supessendisse palipenti. Весенбул якулис лакуса. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus Sclerisque Mollis Nisl, NEC ETHICULA ELITAS A. SED LUCTUS METUS ID MI GRAVIDA, FAUCIBUS CONVALLIS NEQUE PREAIM. Maecinas Quis Sapien Ut Leo Fringilla Time Vitae Sit Amet Leo. Donec Imperdiet Tempus Placerat. Pellentesque pulvinar ultrices 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 в сфере Faucibus orci et ultrices posuere cubilia curae; Sed emementum nibh, quis varius libero. </P> <p> vestibulum Quis Quam Ut Magna emess Accessat weacibus. Pallentesque Eget Nisi A Mi Suscipit Tincidunt. UT Tempus Dictum Risus. Pallentesque Viverra Sagittis Quam в Маттисе. SUSPERNDISSE POLILICEI. Aliquam Sit amet gravida nibh, farsilisis gravida odio. Phasellus Autor Velit в Lacus Blandit, Commodo Iaculis Justo Viverra. Etiam vitae est arcu. Маурис Вэл Кондиг Долор. Aliquam Eget Mi Mi. Fusce Quam Tortor, Commodo AC Duis Quis, Bibendum viverra Erat. Maecenas Mattis Lectus Enim, Quis Tincidunt Dui Rolestie EuIsmod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. Nunc Ornare erat Quis Faucibus olestie. PROIN MALESUADA. Mauris iaculis, Eros ut Dapibus luctus, Massa Enim elementum Purus, Sit amet tristique purus purus nec felis. Morbi Vestibulum Sapien Eget Porta Pulvinar. Нам в Quam Diam. Proin Rhoncus, Felis elementum Dictum, Felis nisi vestibulum tellus и et ultrices рискует Felis в Orci. Quisque vetibulum sem nisl, vel congue leo dictum nec. CRAS EST EST В VELIT SAGITTIS ULLAMCORPER VEL ET LECTUS. В HAC Habitasse Platea Dickumst. Etiam Interdum iaculis Velit, Vel Sollicitinin Lorem Feugiat Sit Amet. Etiam Luctus, Quam Sed Sodales Aliquam, Lorem Libero Hendrerit Urna, Faucibus rhoncus massa nibh в Фелисе. Curabitur ac Tempus Nulla, Ut Semper Erat. Vivamus porta ullamcorper sem, ornare eestas mauris farsilisis id. Fusce Porttitor Eros в Magna Luctus, Non Congue Nulla Eleifend. Aenean Porttitor Feugiat Dolor Sit Amet FARISISIS. Pellentesque venenatis Magna et Risus Commodo, Commodo Turpis Gravida. Nam Mollis Massa Dapibus urna aliquet, Quis iaculis Elit Sodales. Sed Emetge Ornare Orci, Eu Malesuada Justto. Nunc Lacus Augue, Dictum Quis dui Id, Lacinia Congue Quam. Nulla SEM, аликвам NEC Dolor AC, Tempus convallis Nunc. Interdum et Malesuada Fames Ac Ante Ipsum primis в красе. Nulla Suscipit convallis iaculis. Квинк Эйг Коммодо Лигула. Presest Leo Dui, FARISISIS QUIS ELEIFEND IN, Aliquet Vitae Nunc. Survendisse Fermentum Odio AC Massa Ultricies Pellenentesque. Fusce eu suscipit massa. </P> <hr> <h2 id = "Раздел 5"> Часть 5 </h2> <p> nam eget purus ex est conformetur eformula. Nullam ultrices nisl риск, в viverra libero egstas sit amet. Etiam Porttitor Dolor Non Eros Pulvinar Malesuada. Весенбулям сидеть амит est mollis nulla tempus aliquet. Presesent Luctus hendrerit arcu non laoreet. Morbi expcsent Placerat Magna, AC Ornare Odio Sagittis Sed. DONEC VITAE ULLAMCORPER PURUS. Vivamus non metus ac jouryo porta volutpat. </P> <p> vivamus mattis accumsan erat, vel convallis risk pretium nec. Целочисленное Nunc Nulla, Viverra UT SEM Non, Sclerisque efficula 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. Нам в Дапибусе Теллус, Эйз Эймод Нисл. UT EGETENTATIS SAPIEN. Vivamus vulpatate varius mauris, vel varius nisl farsilisis ac. Nulla aliquet просто nibh ornare, eu congue neque rutrum. Весенбул якулис лакуса. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus Sclerisque Mollis Nisl, NEC ETHICULA ELITAS A. SED LUCTUS METUS ID MI GRAVIDA, FAUCIBUS CONVALLIS NEQUE PREAIM. Maecenas Quis Sapien Ut Leo Fringilla Временная витация Sit Amet Leo. Donec Imperdiet Tempus Placerat. Pellentesque pulvinar ultrices 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 в сфере Faucibus orci et ultrices posuere cubilia curae; Sed elementum nibh, quis varius libero. </P> <p> morbi sed fermentum ipsum. Morbi a orci вульпутат сухожительный орган Blandit Quis orci. Donec Aliquam Sodales Gravida. В UT Ullamcorper nisi, AC Pretium Velit. Vestibulum vitae Lectus volutpat, следствие, Lorem sit amet, pulvinar tellus. В Tincidunt Vel Leo Eget Pulvinar. Curabitur A Eros non lacus malesuada aliquam. Прессент и темпус Одио. Целое число Quam Nunc. В Hab Habitasse Platea Dickumst. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque Dui Diamond, Pellenentesque levdavide Id, Accumsan Eu Magna. SED A SEMPER ARCU, UT DIGINISSIM LEO. Aliquam ancess At Ipsum Quis est Dictum Ultrices. Aenean nibh Velit, fringilla in diam id, blandit hendrerit lacus. Donec athicula rutrum рассказывает яйца Fermentum. Pallentesque ac erat et arcu ornare tincidunt. Aliquam erat Volutpat. Vivamus lobortis urna Quis gravida semper. В пристройке, EST A Faucibus Luctus, Mi Dolor Cursus Mi, Id efericula arcu рискует nibh. Pellentesque Blandit Sapien Lacus, vel efericula nunce feugiat sit amet. </P> </div> </div> </body> </html>Результаты следующие:
Позиционирование через CSS
В обоих вышеупомянутых способах использования подключаемого модуля Affix необходимо найти контент через CSS. Дополнительные навигационные (аффиксные) подключаемые переключатели между тремя классами, каждый из которых представляет определенное состояние: .affix, .affix-top и .affix-bottom. Пожалуйста, следуйте приведенным ниже шагам, чтобы настроить свой собственный CSS для этих трех состояний (не полагаясь на этот плагин).
В начале плагин добавляет. В настоящее время позиционирование CSS не требуется.
При прокрутке через элемент, где добавляется дополнительная навигация (аффикс), следует запустить фактическую дополнительную навигацию (аффикс). В настоящее время. Affix заменит .ffix-top и устанавливает позицию: исправлена; (Предоставлено кодом CSS от Bootstrap).
Если определено нижнее смещение, когда прокрутка достигает этой позиции, замените .affix на. Поскольку смещение является необязательным, если смещение установлено, необходимо установить соответствующий CSS. В этом случае добавьте позицию: абсолютно; При необходимости.
Параметры
Есть некоторые варианты, которые передаются через свойства данных или JavaScript. В следующей таблице перечислены эти параметры:
Выше приведено подробное объяснение примера плагина Bootstrap дополнительной навигации (Affix), представленного редактором. Я надеюсь, что это будет полезно для всех!