// 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;
}