Использование эффекта Affix Bootstrap 3
Подключение Affix
Убедитесь что тег <body>, на странице с подключаемым эффектом содержит атрибут data-spy="scroll", вот так <body data-spy="scroll">. Добавьте родительскому элементу в котором будут находиться секции навигации и описания атрибут data-target="#myScrollspy", например <div class="col-md-12" data-target="#myScrollspy">.
<div class="col-md-12" data-target="#myScrollspy"> <div class="col-md-3" id="myScrollspy"> Навигация </div> <div class="col-md-9"> Описание </div> </div>
Код навигации Affix
<div class="col-md-3" id="myScrollspy"> <ul class="nav nav-tabs nav-stacked" id="myNav"> <li class="active"><a href="#nav-tabs-1">Описание 1</a></li> <li><a href="#nav-tabs-2">Описание 2</a></li> <li><a href="#nav-tabs-3">Описание 3</a></li> <li><a href="#nav-tabs-4">Описание 4</a></li> <li><a href="#nav-tabs-5">Описание 5</a></li> </ul> </div>
Код описания Affix
<div class="col-md-9"> <h3 id="nav-tabs-1">Описание 1</a> Содержимое <h3 id="nav-tabs-2">Описание 2</a> Содержимое <h3 id="nav-tabs-3">Описание 3</a> Содержимое <h3 id="nav-tabs-4">Описание 4</a> Содержимое <h3 id="nav-tabs-5">Описание 5</a> Содержимое </div>
Стили оформления Affix
Предоставлен простейший стиль оформления навигации, измените или дополните селекторы CSS нужными свойствами.
ul.nav-tabs{
width: 180px;
margin-top: 20px;
border: 1px solid #999;
border-radius: 4px;
}
ul.nav-tabs li{
margin: 0;
border-top: 1px solid #999;
}
ul.nav-tabs li:first-child{
border-top: none;
}
ul.nav-tabs li a{
margin: 0;
padding: 8px 16px;
border-radius: 0;
color: #000;
}
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
color: #000;
background: #eee;
border: 1px solid #999;
}
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;
}
Классу
nav-tabsтребуется установить явные размеры ширины блока навигации, напримерwidth: 180px;.
Скрипт контроля фиксации Affix
Фиксирование блока навигации, а точнее установление значения для контроля устанавливается в top: 100, возможно указать 2 значения для топа и нижней части top: 100, bottom: 100.
<script>
$(document).ready(function(){
$("#myNav").affix({
offset: {
top: 100
}
});
});
</script>
Функции контроля Affix
- affix.bs.affix
- Событие возникает непосредственно перед прикреплённым элементом
- affixed.bs.affix
- Событие вызывается после того, как элемент был прикреплен
- affix-top.bs.affix
- Событие возникает непосредственно перед элементом, прикрепленному к топу
- affixed-top.bs.affix
- Событие вызывается после того, как элемент был прикреплен к топу
- affix-bottom.bs.affix
- Событие возникает непосредственно перед элементом прикреплённым к нижней части
- affixed-bottom.bs.affix
- Событие вызывается после того, как элемент был прикреплен к нижней части.
Пример использования функции контроля Affix
<script>
$(document).ready(function(){
$("#myNav").on('affixed.bs.affix', function(){
alert("Прикрепление элемента при прокрутке");
});
});
</script>
Демо эффекта Affix Bootstrap 3
В код редактора можно вносить изменения, после редактирования нажмите на значёк выполнения, если страница результата не была закрыта данные на ней обновятся.