Появление меню при прокрутке вверх и исчезновение при прокрутке вниз

Правила форума, технические вопросы. Регистрация на форуме.
Ответить Вложения 2
Аватара пользователя

Автор Темы
artem19
Читатель
Читатель
Сообщения: 3
Зарегистрирован: 21 мар 2019, 16:19
Версия Web Builder: 14.1
Имя: Артем

Появление меню при прокрутке вверх и исчезновение при прокрутке вниз

Сообщение artem19 » 30 июл 2020, 20:40

Здравствуйте!
Может кто поможет? Как реализовать функцию скрытия слоя при прокрутке вниз страницы, но при прокрутке вверх чтобы слой появлялся.
Заранее благодарю!!!!

Реклама
Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5087
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Появление меню при прокрутке вверх и исчезновение при прокрутке вниз

Сообщение anonimus » 30 июл 2020, 21:46

Один из вариантов - использование событий
А именно:
onscrollhide (срабатывание события при скрытии объекта с экрана)
onscrollrevealpartial (срабатывание события при появлении объекта на экране)
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Мои товары в магазине https://market.wysiwygwebbuilder.ru/anonimus.html
==============

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5087
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Появление меню при прокрутке вверх и исчезновение при прокрутке вниз

Сообщение anonimus » 30 июл 2020, 23:30

**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Мои товары в магазине https://market.wysiwygwebbuilder.ru/anonimus.html
==============

Аватара пользователя

ekaterina51
Читатель
Читатель
Сообщения: 16
Зарегистрирован: 11 фев 2020, 22:44
Версия Web Builder: 14.2.2

Появление меню при прокрутке вверх и исчезновение при прокрутке вниз

Сообщение ekaterina51 » 31 июл 2020, 23:02

Держи! Думаю это то, что надо.
12345.rar
У вас нет необходимых прав для просмотра вложений в этом сообщении.

Аватара пользователя

Eric
Продвинутый
Продвинутый
Сообщения: 299
Зарегистрирован: 19 дек 2018, 17:40
Версия Web Builder: 14.2.2
Имя: Дмитрий
Контактная информация:

Появление меню при прокрутке вверх и исчезновение при прокрутке вниз

Сообщение Eric » 01 авг 2020, 12:54

Скрытие слоя при прокрутке вниз страницы

Код: Выделить всё

#ID_Слоя{
display: none;
}


Код: Выделить всё

<script>
$(document).scroll(function () {
    if ($(this).scrollTop() > 500) {     //задержка
      $('#ID_Слоя').fadeIn(100);       //скорость появления
    } else {
      $('#ID_Слоя').fadeOut(100);     //скорость исчезновения
    }
  });
</script>
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Разработка расширений под WebBuilder.

Аватара пользователя

Gudwinn
Эксперт
Эксперт
Сообщения: 1402
Зарегистрирован: 07 авг 2015, 18:39
Версия Web Builder: 11.0.2
Имя: Кирилл

Появление меню при прокрутке вверх и исчезновение при прокрутке вниз

Сообщение Gudwinn » 06 авг 2020, 15:06

artem19, вот вариант самый простой для фиксированной шапки, джейквери должна быть подрублена

Код: Выделить всё

<script>
let header = $('#Layer1'),// айдишник плавающей шапки
      scrollPrev = 0;

$(window).scroll(function() {
   let scrolled = $(window).scrollTop();
 
   if ( scrolled > 100 && scrolled > scrollPrev ) {
      header.fadeOut(500); //скорость скрытия шапки
   } else {
      header.fadeIn(500);//скорость отображения шапки
   }
   scrollPrev = scrolled;
});
</script>

вставить это всё дело до body в исходнике страницы
создание и разработка сайтов
Платные консультации
Готовые решения
Скайп: kirill47853


Ответить Вложения 2

Вернуться в «Правила форума, технические вопросы.»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость