Максим Васянович
Я являюсь автором этого блога, а также занимаюсь разработкой сайтов. Любой feedback по каналу на YouTube или этому блогу принимаю по форме (либо пишите Вконтакте). Надеюсь на Вас.
Напишите мне Смотрите меня
Все те, кто ждет продолжения курса — следующая часть записана уже пару дней назад, но мне в ней кое-что надо поменять, поэтому затягивается.
Как показывать меню при скролле вниз?
Здесь все довольно просто. Создаете меню с 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.
Всем приятного времени суток!
(1 оценок, среднее: 5,00 из 5)
Загрузка...Понравилось? Расскажи другим!
Добавить комментарий