@LastGeneral

Как добавлять класс при скороле?

// hide header on scroll down show on scroll up
let prevScrollpos = window.pageYOffset;

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("site-header").style.top = "0";
  } else {
    document.getElementById("site-header").style.top = "-70px";	  
  }
  prevScrollpos = currentScrollPos;
}


Сейчас при скороле вниз header скрывается, а при скроле вверх показывается, а как сделать так что бы он ещё добавлял класс когда скролится вверх, но когда он доскролит до самого верха страницы класс убирался? Это все для того что бы в шапке небыло фона и тени в изначальном виде.

// add class onscroll
let className = "scroll";
let scrollTrigger = 60;

window.onscroll = function() {
  if (window.scrollY >= scrollTrigger || window.pageYOffset >= scrollTrigger) {
    document.getElementsByTagName("header")[0].classList.add(className);
  } else {
    document.getElementsByTagName("header")[0].classList.remove(className);
  }
};

.scroll {
	-webkit-box-shadow: 0px 0px 10px -5px rgb(0 0 0 / 50%);
	box-shadow: 0px 0px 10px -5px rgb(0 0 0 / 50%);
	background-color: #fff;
}
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
@LastGeneral Автор вопроса
// hide header on scroll down show on scroll up
const scroll = document.getElementById("site-header");
const scrollUp = "scroll-up";
const scrollDown = "scroll-down";
let lastScroll = 0;

window.addEventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll <= 0) {
    scroll.classList.remove(scrollUp);
    return;
  }

  if (currentScroll > lastScroll && !scroll.classList.contains(scrollDown)) {
    // down
    scroll.classList.remove(scrollUp);
    scroll.classList.add(scrollDown);
  } else if (
    currentScroll < lastScroll &&
    scroll.classList.contains(scrollDown)
  ) {
    // up
    scroll.classList.remove(scrollDown);
    scroll.classList.add(scrollUp);
  }
  lastScroll = currentScroll;
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
hahenty
@hahenty
('•')
Вместо прозрачности ставится что угодно.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы