Скрытие меню при скроллинге вниз + бесконечный скроллинг. Как исправить несовместимость?

Question

[Hellas]

Есть страница, на которой имеется бесконечный скроллинг и скрипт скрытия/показа меню при скроллинге - https://jsfiddle.net/mariusc23/s6mLJ/31/

Проблема заключается в том, что в момент подгрузки контента на странице скрипт считает, что страница была прокручена вверх и, соответственно, меняет класс меню на .nav-down.

Как решить эту проблему?

Answer 1

[devstudent]

Вам нужен приклеивающийся при прокрутке хидер? тогда так:
прописать основной класс nav-up хидеру сразу в цсс , а тот класс, которой будет его приклеивать при прокрутке (класс nav-down) добавлять-удалять скриптом

$(window).scroll(function() {
   				if ($(this).scrollTop() > 100){  
        			$('.site-header').addClass("nav-down");
        			
    					}
    			else{
       				$('.site-header').removeClass("nav-down");
       				
    					}
			});

Comments

[Hellas]

Нет, мне нужно, чтобы фиксированное меню скрывалось, когда пользователь прокручивает страницу вниз и снова появлялось, когда прокручивает вверх, так, как делает это скрипт, ссылку на который я дал в вопросе.
Но этот скрипт работает проблемно, если на странице есть infinite scroll, ибо в момент загрузки контента скрипт показывает меню, даже если пользователь не прокручивал страницу вверх.
Например, тут всё работает верно - https://medium.com/tag/design-systems

[devstudent]

Hellas: проблема не в скрипте а в стилях, я думаю изначально позиционирование должно быть абсолют и прятать меню за верхнюю грань экрана , а при добавлении класса при прокрутке менять на позишн fixed и top:0;