Как удалить класс в скрипте при скроллинге вверх?

Question

[Алексей Королёв]

Написал такой скрипт, где при скроллинге вниз шапка исчезает, а при скролинге вверх добавляются классы position fixed, фон для шапки и отступы. Но при возвращению к defaultOffset он не умеет удалять эти значения. Помогите пожалуйста.

let lastScroll = 0;
const header = document.getElementById('nav');
const defaultOffset = 150;
const scrollPosition = () => window.pageYOffset || document.documentElement.scrollTop;

window.addEventListener('scroll', () => {
  if(scrollPosition() > lastScroll && scrollPosition() > defaultOffset) {
  header.classList.remove('header_fix')
  }
else if (scrollPosition() < lastScroll) {
  header.classList.add('header_fix'); 
}
lastScroll = scrollPosition();
});

Comments

[Сергей Сергей]

Если && заменить на ||?

[Алексей Королёв]

Сергей Сергей, так класс применяется только когда скролинг доходит defaultOffset. А нужно убирать класс когда он подходит к этому значению

[Сергей Сергей]

а так?

-else if (scrollPosition() < lastScroll) {
+else if (scrollPosition() < lastScroll || scrollPosition() < defaultOffset) {

[Алексей Королёв]

Сергей Сергей, так вообще ошибку выдаёт

[Сергей Сергей]

Что за ошибка?

Answer 1

[Александр Шипин]

let header = document.getElementById("nav");

window.addEventListener("scroll", () => {
  let scrollPosition = window.pageYOffset;
  if (scrollPosition > 150) header.classList.remove("header_fix");
  else if (scrollPosition < 150) header.classList.add("header_fix");
});

Проблема в том, что вы привязываетесь к константе, которая не видит, изменили вы что-то или нет.
Код, что я вам прикладываю, отлично отрабатывает в песочнице то, что вами запланировано