Как отследить скрол вниз на некоторое растояние?

Question

[Nohaga]

Вот такой код, при 1 пиксели скроле вниз уже срабатывает и менюшка исчезает. А в сафари например там эффект качания, типо когда скролишь сайт покачивается вверх вниз, это учитывается скролом. Там менюшка дёргается то появляется то ичезает, если бы сделать чтоб срабатывало только при скроле 50 пикселей например, чтоб не реагировала на эти шатания и мелкие движения пальца.

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(window).scrollTop();
   if (st > 100 && st > lastScrollTop){
      $('.header_top').addClass('hide');
   } else {
      $('.header_top').removeClass('hide');
   }
   lastScrollTop = st;
});

Comments

[Ankhena]

при 1 пиксели скроле вниз уже срабатывает и менюшка исчезает.

У вас в скрипте написано делать это после 100px прокрутки.

Проверяйте кеш и какой файл редактируете.

[Nohaga]

Ankhena, это относиться к прокрутке с самого начала страницы, я нужно чтоб с любого места страницы

[Ankhena]

Nohaga, значит сравнивайте разницу, а не положение от верха страницы.
Если я вообще правильно понимаю, что вам надо.

[Nohaga]

Ankhena, вот как раз в этом и вопрос как это сделать.

[Ankhena]

Nohaga, записываете в переменную скролл в какой-то момент (вам виднее в какой, возможно при смене направления скролла или еще как, я не знаю вашу задумку).
Следите за текущим.
Сравниваете.
Если разница больше 50 (или сколько вам нужно) выполняете действие.

[Nohaga]

Ankhena, это очевидно, только не знаю как так сделать, в функции $(window).scroll(function(event) переменная будет перезаписываться при смещении на 1 пиксель каждый раз, так что не с чем будет сравнивать. За событие конечно можно взять tap на мобилах, но считать то нужно скрол, короче не знаю как сделать и в инете не нашёл, странно, неужели никто не замечал как в сафари это себя ведёт.
Задумка простая, чтоб менюшку верхнюю скрывать при скроле вниз от 100 пикселей и при скроле вверх отображать.

[Ankhena]

Nohaga,

переменная будет перезаписываться при смещении на 1 пиксель каждый раз

Перезаписывайте только если разница больше 50.
lastScrollTop = st; это внутрь if. Если больше 50, то перезаписать.

[Nohaga]

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

$(window).scroll(function(event){
   var st = $(window).scrollTop();
	
   if (st > 15 && st > lastScrollTop){
      $('.header_top').addClass('hide');
   } 
    if ((st - lastScrollTop) > 15)  {
		lastScrollTop = st;
	}
	if (st < lastScrollTop){
     $('.header_top').removeClass('hide');
   } 
   console.log(lastScrollTop + ' ' + st);
});

А если просто то напишите рабочий код, я думаю тут не просто нифига. Вот тут снизу например более менее решение https://ru.stackoverflow.com/questions/657444/jque...
но оно не везде работает.
так что зря поставили простую сложность.

[Ankhena]

Nohaga, по-русски опишите процесс.
Вот я открыла страницу. Скролл на 0. Прокрутила на 50px - сработала функция.
Дальше что?
Что должно произойти, если я дальше прокручиваю страницу или прокручиваю ее в обратную сторону?
Следующее действие снова через 50px? Или после временной паузы?

Answer 1

[Евгений Неверов]

Ну, вам видимо мешает вот эта часть условия: st > lastScrollTop, потому что при любом скролле вниз ваше текущее состояние всегда будет больше предыдущего.

Если вы уберёте эту часть условия и оставите только if (st > 100), то сможете учитывать, что страница проскроллилась именно на нужное расстояние вниз. А lastScrollTop вам и вовсе не нужен.