Bootstrap Плагин Affix
Плагин Affix позволяет закрепить указанный <div> в определённом месте на странице. Распространённый пример — значки социальных сетей. Они начинаются с определённого места, но когда страница достигает определённого маркера, <div> фиксируется в позиции и не прокручивается вместе с остальной частью страницы.
Если вы хотите использовать функциональность плагина отдельно, вам нужно подключитьaffix.js. Или, как упоминалось в главеОбзор плагинов Bootstrap, вы можете подключитьbootstrap.jsили сжатую версиюbootstrap.min.js。
Использование
Вы можете использовать плагин Affix через атрибут data или через JavaScript.
- Через атрибут data: Чтобы добавить поведение Affix к элементу, просто добавьте к элементу, который нужно отслеживать,data-spy="affix"Вот и всё. Используйте смещения, чтобы определить, когда переключать фиксацию и перемещение элемента.
Пример
В следующем примере демонстрируется использование плагина Affix через атрибут data:
Пример
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Плагин Bootstrap Affix</title> <link rel="stylesheet" href="http://cdn.static.example.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.example.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.example.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style>/* Пользовательские стили */ 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; border-radius: 0; } ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{ color: #fff; 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{ border-radius: 0 0 4px 4px; } ul.nav-tabs.affix{ top: 30px; /* Установите верхнее положение закрепленного элемента */ }</style> </head> <body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <div class="jumbotron"> <h1>Bootstrap Affix</h1> </div> <div class="row"> <div class="col-xs-3" id="myScrollspy"> <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125"> <li class="active"><a href="#section-1">Часть 1</a></li> <li><a href="#section-2">Часть 2</a></li> <li><a href="#section-3">Часть 3</a></li> <li><a href="#section-4">Часть 4</a></li> <li><a href="#section-5">Часть 5</a></li> </ul> </div> <div class="col-xs-9"> <h2 id="section-1">Часть 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p> <p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo 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="section-2">Часть 2</h2> <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In 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 at rutrum. Phasellus congue vestibulum ligula sed consequat.</p> <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient 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="section-3">Часть 3</h2> <p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat 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 at accumsan tincidunt. Phasellus risus risus, 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 pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus.</p> <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at 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 diam, eget convallis tellus. Suspendisse potenti.</p> <hr> <h2 id="section-4">Часть 4</h2> <p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor 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 auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p> <p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo 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>Пусть закваска, и не будет товарищам время, ибо прежде иногда эрос, нуждается траур сам эрос, эрос ложечка. Ныне орк дуга кто пасти неприятность. Вперёд дурное убеждение следует удобству. Мавр дротики, эрос как пищам траур, масса ибо элемент чистый, да будет грустный чистый чистый и не кошка. Болезнь вестибюль мудрый нуждается ворота подушка. Ибо но чем диаметр. Вперёд храп, кошка элемент аккумулятор слово, кошка если не вестибюль земля, и мстители смех кошка в орк. Каждый вестибюль семя ниль, слово и не. Завтра нуждается но хочет стрелы обёртка или ложе. В этой обитал площадь сказано. Также иногда дротики хочет, или беспокойство лорем феугиат да будет любит. Также траур, чем но товарищи некоторую, лорем свободно hendrerit урна, пасти храп масса нибх но кошка. Курабитур и время никакая, как всегда был. Будем жить ворота обёртка семя, украшать бедность мавры легкость это.</p> <p>Как смех ниль. Мрачный носитель эрос но большая траур, не с никакая eleifend. Энеев носитель feugiat боль да будет любит легкость. Кожа яды большая и смех удобство, от удобство грязный беременная. Ибо мягкий масса пищам урна aliquet, кто дротики элита товарищи. Но нуждается украшать орк, я дурное убеждение справедливо. Ныне озеро augue, слово кто dui, lacinia с чем. Никакая семя семя, некоторую и не боль но, время convallis ныне. Иногда и дурное убеждение голод но прежде сам первый в пасти. Никакая получает convallis дротики. Каждый нуждается удобство ложечка. Присутствует лев dui, легкость кто eleifend в, aliquet жизни ныне. Повеситься закваска ненависть но масса мстители кожа. Мрачный я получает масса.</p> <hr> <h2 id="section-5">Часть 5</h2> <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p> <p>Vivamus mattis accumsan erat, vel convallis risus pretium nec. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Maecenas ullamcorper, turpis suscipit pellentesque fringilla, massa lacus pulvinar mi, nec dignissim velit arcu eget purus. Nam at dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis ac. Nulla aliquet justo a nibh ornare, eu congue 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 scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor 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 auctor. Vestibulum ante ipsum primis in 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. In ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consequat lorem sit amet, pulvinar tellus. In tincidunt vel leo eget pulvinar. Curabitur a eros non lacus malesuada aliquam. Praesent et tempus odio. Integer a quam nunc. In hac habitasse platea dictumst. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui diam, pellentesque vel gravida id, accumsan eu magna. Sed a semper arcu, ut dignissim leo.</p> <p>Sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt. Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. In condimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risus a nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p> </div> </div> </div> </body> </html>
Попробуйте »Результат следующий:
- Через JavaScript: Вы можете вручную добавить Affix к элементу с помощью JavaScript, как показано ниже:
$('#myAffix').affix({ offset: { top: 100, bottom: function () { return (this.bottom = $('.bs-footer').outerHeight(true)) } } })Пример
Следующий пример демонстрирует использование плагина Affix через JavaScript:
Пример
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Плагин Bootstrap Affix</title> <link rel="stylesheet" href="http://cdn.static.example.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.example.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.example.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style>/* Пользовательские стили */ 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; border-radius: 0; } ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{ color: #fff; 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{ border-radius: 0 0 4px 4px; } ul.nav-tabs.affix{ top: 30px; /* Установите верхнее положение закрепленного элемента */ }</style> <script>$(document).ready(function(){ $("#myNav").affix({ offset: { top: 125 } }); });</script> </head> <body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <div class="jumbotron"> <h1>Bootstrap Affix</h1> </div> <div class="row"> <div class="col-xs-3" id="myScrollspy"> <ul class="nav nav-tabs nav-stacked" id="myNav"> <li class="active"><a href="#section-1">Часть 1</a></li> <li><a href="#section-2">Часть 2</a></li> <li><a href="#section-3">Часть 3</a></li> <li><a href="#section-4">Часть 4</a></li> <li><a href="#section-5">Часть 5</a></li> </ul> </div> <div class="col-xs-9"> <h2 id="section-1">Часть 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p> <p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo 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="section-2">Часть 2</h2> <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In 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 at rutrum. Phasellus congue vestibulum ligula sed consequat.</p> <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient 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="section-3">Часть 3</h2> <p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat 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 at accumsan tincidunt. Phasellus risus risus, 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 pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus.</p> <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at 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 diam, eget convallis tellus. Suspendisse potenti.</p> <hr> <h2 id="section-4">Часть 4</h2> <p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor 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 auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p> <p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo 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>Пусть закваска, и не будет товарищам время, ибо прежде иногда эрос, нуждается траур сам эрос, эрос ложечка. Ныне орк дуга кто пасти неприятность. Вперёд дурное убеждение следует удобству. Мавр дротики, эрос как пищам траур, масса ибо элемент чистый, да будет грустный чистый чистый и не кошка. Болезнь вестибюль мудрый нуждается ворота подушка. Ибо но чем диаметр. Вперёд храп, кошка элемент аккумулятор слово, кошка если не вестибюль земля, и мстители смех кошка в орк. Каждый вестибюль семя ниль, слово и не. Завтра нуждается но хочет стрелы обёртка или ложе. В этой обитал площадь сказано. Также иногда дротики хочет, или беспокойство лорем феугиат да будет любит. Также траур, чем но товарищи некоторую, лорем свободно hendrerit урна, пасти храп масса нибх но кошка. Курабитур и время никакая, как всегда был. Будем жить ворота обёртка семя, украшать бедность мавры легкость это.</p> <p>Как смех ниль. Мрачный носитель эрос но большая траур, не с никакая eleifend. Энеев носитель feugiat боль да будет любит легкость. Кожа яды большая и смех удобство, от удобство грязный беременная. Ибо мягкий масса пищам урна aliquet, кто дротики элита товарищи. Но нуждается украшать орк, я дурное убеждение справедливо. Ныне озеро augue, слово кто dui, lacinia с чем. Никакая семя семя, некоторую и не боль но, время convallis ныне. Иногда и дурное убеждение голод но прежде сам первый в пасти. Никакая получает convallis дротики. Каждый нуждается удобство ложечка. Присутствует лев dui, легкость кто eleifend в, aliquet жизни ныне. Повеситься закваска ненависть но масса мстители кожа. Мрачный я получает масса.</p> <hr> <h2 id="section-5">Часть 5</h2> <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p> <p>Vivamus mattis accumsan erat, vel convallis risus pretium nec. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Maecenas ullamcorper, turpis suscipit pellentesque fringilla, massa lacus pulvinar mi, nec dignissim velit arcu eget purus. Nam at dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis ac. Nulla aliquet justo a nibh ornare, eu congue 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 scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor 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 auctor. Vestibulum ante ipsum primis in 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. In ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consequat lorem sit amet, pulvinar tellus. In tincidunt vel leo eget pulvinar. Curabitur a eros non lacus malesuada aliquam. Praesent et tempus odio. Integer a quam nunc. In hac habitasse platea dictumst. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui diam, pellentesque vel gravida id, accumsan eu magna. Sed a semper arcu, ut dignissim leo.</p> <p>Sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt. Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. In condimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risus a nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p> </div> </div> </div> </body> </html>
Попробуйте »Результат следующий:
Позиционирование через CSS
В двух вышеописанных способах использования плагина Affix необходимо позиционировать содержимое с помощью CSS. Плагин Affix переключается между тремя классами, каждый из которых представляет определённое состояние:.affix, .affix-top и .affix-bottom. Выполните следующие шаги, чтобы настроить собственный CSS для этих трёх состояний (не полагаясь на этот плагин).
- В начале плагин добавляет.affix-top, чтобы указать, что элемент находится в самой верхней позиции. На этом этапе CSS-позиционирование не требуется.
- При прокрутке мимо элемента с Affix должен сработать сам Affix. В этот момент.affixзаменит.affix-topи одновременно установитposition: fixed;(предоставляется CSS-кодом Bootstrap).
- Если нижнее смещение определено, когда прокрутка достигает этой позиции, следует.affixзаменить на.affix-bottom. Поскольку смещение необязательно, если это смещение задано, также требуется соответствующий CSS. В этом случае добавьте при необходимостиposition: absolute;。
Параметры
Некоторые параметры передаются через атрибуты данных или JavaScript. В следующей таблице перечислены эти параметры:
| Название параметра | Тип/Значение по умолчанию | Имя атрибута данных | Описание |
|---|---|---|---|
| offset | number | function | object Значение по умолчанию: 10 | data-offset | При вычислении позиции прокрутки учитывается смещение в пикселях от верхнего края. Если задано число, значение смещения будет применено как к верхнему, так и к нижнему краю. Если смещение задано объектом, его значение выглядит как offset: { top: 10 } или offset: { top: 10, bottom: 5 }. Если смещение нужно вычислять динамически, используйте функцию. |