Фиксирование при скроллинге · Affix Bootstrap 3

Affix Bootstrap 3

Эффект Affix фиксирует блок навигации по странице при скроллинге, для работы эффекта требуется подключение фреймворка Bootstrap 3, описаны основные параметры применения дополненные демо.

Использование эффекта 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

В код редактора можно вносить изменения, после редактирования нажмите на значёк выполнения, если страница результата не была закрыта данные на ней обновятся.


Рейтинг: 4.5/5 из 6



Добавлено Автор Ник Источник Просмотров Комментариев Теги
13-01-2015 Михаил Меренков aTmpl © 4127 0 bootstrap 3, affix