Как показать меню при скролле вниз и вверх?

Все те, кто ждет продолжения курса — следующая часть записана уже пару дней назад, но мне в ней кое-что надо поменять, поэтому затягивается.

Как показывать меню при скролле вниз?

Здесь все довольно просто. Создаете меню с 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.

Всем приятного времени суток!

Метки: JavaScript, jQuery, Лайфхак, Скролл