форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
19-03-2019 в 17:18 100

Показать или скрыть меню при скролле страницы в низ и вверх


Показать или скрыть меню при скролле страницы в низ и вверх
Всем привет сегодня покажу вам маленький пример как можно скрыть меню или блок при скролле страницы в низ а при скролле в верх показать обратно как в мобильных приложениях

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

Пример работы скрипта


Качество видео не очень но для примера работы скрипта подходит



Данный скрипт не только для сайтов юкоз он так же будет работать и на любом другом сайте если у вас подключена библиотека jquery

Установка скрипта на сайт


Установка очень проста вам нужно просто скопировать скрипт ниже и вставить его на страницу сайта перед закрывающим тегом /body

Код

<script>  
var lastScrollTop = 0;
$(window).scroll(function(event){
  var st = $(this).scrollTop();
  if (st > lastScrollTop){
  $(".navMenu").fadeOut();
  } else {
  $(".navMenu").fadeIn();
  }
lastScrollTop = st;
});
</script>

не забывайте что на сайте должна быть подключена библиотека jquery иначе скрипт работать не будет!

Настройка скрипта


Для того чтобы скрипт работал под тот элемент который хотите вы вам нужно поменять в скрипте выше две строчки в которых указан класс .navMenu

Цитата

$(".navMenu").fadeOut();
} else {
$(".navMenu").fadeIn();


в место класса .navMenu вам нужно указать класс или id вашего элемента для которого хотите применить данный скрипт

Обратите внимание что если вы указываете id вместо класса то ид указывается через # а класс через . так что будьте внимательны

2

Комментарии

Комментариев пока нет!
Добавлять комментарии могут только зарегистрированные пользователи.

[ Регистрация | Вход ]

Автор


Похожие материалы

Реклама



Дополнение

Демонстрация результата либо показана на отдельной странице, либо просто показана на скриншоте. В исключительных случаях, когда нет возможности показать работу даже на скриншоте, используется развернутое описание. Описание есть у каждого материала, этот пункт важен, но иногда описание бывает косвенным, пустословным. Это относится к тем материалам, которым не нужна детальная инструкция.

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru