Старая форма входа
Вид материаловМенюКатегорииИнформерКнопки
Наш чат 1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

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

Добавлено 19-03-2019 в 17:18

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

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

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


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



Данный скрипт не только для сайтов юкоз он так же будет работать и на любом другом сайте если у вас подключена библиотека 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 вместо класса то ид указывается через # а класс через . так что будьте внимательны

Комментарии

Grician 24-09-2021 в 08:06
Подскажите, а где взять такое меню?
waak 24-09-2021 в 17:22
Какие именно такие?
waak 24-09-2021 в 17:24
Если вы про то что на видео то это меню было мной сделано для демонстрации скрипта как и вся страница если найду на пк то аыложу на сайт вёрстку

Оставить комментарий

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

Регистрация Вход
Комментарии
waak

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

04-03-2024 в 08:01 материал
Fr Frag

Для модуля новости не работает

03-03-2024 в 05:55 материал
web_master

при добавлении комментарии выдает ошибку в консоли:

POST http:сайт/index/ 404 (Not Found)

29-02-2024 в 16:58 материал
web_master

UPD: так будет работать , + в конце будут показывать и проценты...

Код
<?($OTHER2$-$OTHER1$)/$OTHER2$*100 ?>


А так будет без процентов:
Код
<?int(($OTHER2$-$OTHER1$)/$OTHER2$*100)?>  

25-02-2024 в 23:06 материал
web_master

Скрипт не работает почему-то

25-02-2024 в 22:09 материал
waak

Не за что! Я бы делал больше но просьб мало а самому сидеть придумывать не всегда есть время по этому и обновления идут редко

07-02-2024 в 18:26 материал
ed edik2009

Спасибо.Поставил все работает. К сожалению эпоха сайтостроения Юкоз прошла. Ваш сайт один из немногих который, хоть что то обновляет материалы для в этой системы (Скрипты, Шаблоны, Графика и т.д)

07-02-2024 в 08:08 материал
waak

Здравствуйте! вы наверное не совсем понимаете смысл данного раздела, Что бы я мог выполнить вашу просьбу я должен понимать что именно вам нужно а в вашей просьбе нет конкретики и по этому выполнить её не получится

27-01-2024 в 15:12 материал
di dinyslamsinger

От души qv

23-01-2024 в 16:58 материал
di dinyslamsinger

Работает ты лучший брат спасибо

03-01-2024 в 20:10 материал
waak

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

30-12-2023 в 12:00 материал
di dinyslamsinger


Я уже установил qv

30-12-2023 в 04:26 материал

Услуга от адмиистратора

Вы можите заказать установку от администратара ( waak ) этого материала или любого другога с нашего сайта на ваш сайт или доработку под ваши нужды!

от 150рзаказать