Подключение и настройка эффекта Auto Hiding Menu Bootstrap
Подключение плагина
Для применения достаточно подключить на страницах с используемым эффектом, перед закрывающим тегом </body> внешний скрипт управления jquery.bootstrap-autohidingnavbar.min.js, а ниже него скрипт инициализирующий плагин.
<script src="//atmpl.ru/design/scroll-effect/2015/hiding-menu/jquery.bootstrap-autohidingnavbar.min.js"></script>
<script>
$("nav.navbar-fixed-top").autoHidingNavbar();
</script>
Обратите внимание! В примере используется инициализация с селектором меню Bootstrap
nav.navbar-fixed-top, но меню может быть сформировано с тегом<div class="navbar navbar-fixed-top">, тогда в скрипте инициализации нужно указать его:div.navbar-fixed-top.
Настройки параметров
| Параметр | По умолчанию | Описание |
|---|---|---|
disableAutohide |
false |
Программное скрытие отключено, подключить - true . |
showOnUpscroll |
true |
Меню появляется при прокрутке скроллинга вверх, отключить - false. |
showOnBottom |
true |
Меню появляется при прокрутке до крайней нижней точки страницы, отключить - false. |
hideOffset |
'auto' |
Скрывает меню при прокрутке на размер высоты меню. |
animationDuration |
200 |
Продолжительность показа и скрытия анимации в миллисекундах. |
Используемые методы
| Метод | Описание |
|---|---|
setDisableAutohide(value) |
Изменение параметра `disableAutohide`. |
setShowOnUpscroll(value) |
Изменение параметра `showOnUpscroll`. |
setShowOnBottom(value) |
Изменение параметра `showOnBottom`. |
setHideOffset(value) |
Изменение параметра `hideOffset`. |
setAnimationDuration(value) |
Изменение параметра `animationDuration`. |
show() |
Показать меню программно. |
hide() |
Скрыть меню программно. |
destroy() |
Отключает экземпляр плагина. |
Относительный пример использования для высоты до верхней точки в 600px.
$(document).ready(function() {
$("div.navbar-fixed-top").autoHidingNavbar();
$('.navbar-fixed').autoHidingNavbar('setDisableAutohide', true);
$('.navbar-fixed').autoHidingNavbar('hide');
$(document).on('scroll', function() {
if ($(window).scrollTop() >= 600) {
$('.navbar-fixed').autoHidingNavbar('show');
}
else {
$('.navbar-fixed').autoHidingNavbar('hide');
}
}
});
Действие эффекта
Данный эффект задействован на странице этого материала, используются настройки по умолчанию.