Скрыть меню при скроллинге · Auto Hiding Menu Bootstrap

Скрыть меню при скроллинге

Плагин скрывающий фиксированное меню фреймворка bootstrap при скроллинге страницы, убирает меню в топ страницы при прокрутке, достаточно подключения скрипта и его запуска.

Подключение и настройка эффекта 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');
 }
 }
});

Действие эффекта

Данный эффект задействован на странице этого материала, используются настройки по умолчанию.

Скачать плагин Auto Hiding Menu Bootstrap

Скачать плагин

Рейтинг: 4.1/5 из 7



Добавлено Автор Ник Источник Просмотров Комментариев Теги
23-01-2015 Михаил Меренков aTmpl © 2901 0 Скрыть, меню, при скроллинге, убрать