Все те, кто ждет продолжения курса — следующая часть записана уже пару дней назад, но мне в ней кое-что надо поменять, поэтому затягивается.
Как показывать меню при скролле вниз?
Здесь все довольно просто. Создаете меню с position: fixed и с помощью простого скрипта обрабатываете его поведение:
$(window).scroll(function(event) { if($(this).scrollTop() > 105) { $(".scroll-mnu").slideDown(); return false; } else { $(".scroll-mnu").slideUp(); } }); |
Это все довольно просто выглядит, но как быть, если скролл нужен вверх? Тут уже чуть больше подумать нужно, но логика в целом тоже довольно простая:
var lastScrollTop = 0; $(window).scroll(function(event){ var st = $(this).scrollTop(); if (st > lastScrollTop){ $(".scroll-mnu").fadeOut(); } else { $(".scroll-mnu").fadeIn(); } lastScrollTop = st; }); $(window).scroll(function(event){ var st = $(this).scrollTop(); if (st == 0) { $(".scroll-mnu").fadeOut(); } }); |
lastScrollTop — переменная, которая равна нулю и является началом координат страницы. st — переменная, которая будет следить за положением нашего меню относительно начала страницы. Собственно, чтобы скрипт работал, нужно при скролле вниз (когда st > lastScrollTop, или же больше нуля) меню не показывалось, а в обратном случае (else) — показывалось. Плюс ко всему, вторая часть скрипта, где st == 0, отвечает за скрытие меню на нуле координат.
Подробнее в видео
Надеюсь, Вам было понятно! Если нет — спрашивайте у меня в комментариях под видео или в блоге! Так же можете писать в личку Вконтакте, она открыта:)
Референсы
Это лишь первый урок из новой рубрики, но новые видео не заставят себя долго ждать. Спойлер: следующий выпуск связан с отправкой формы с вашего сайта в Telegram.
Всем приятного времени суток!
Автор данного блога. Веб-разработчик. Фрилансер. Создаю крутые адаптивные сайты. Портфолио на https://maxgraph.ru/
Добавляйтесь в друзья Вконтакте! Каждому добавившемуся и написавшему в личку «хочу полезность» — подарю набор крутых ссылок для верстальщика :)