Script Sample/Parallax Effect
Parallax Effect - 숨김 메뉴
오이연우오
2022. 4. 14. 23:48
document.querySelectorAll("#parallax__nav li a").forEach(li => {
li.addEventListener("click", (e) => {
e.preventDefault();
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior:"smooth"
})
document.querySelectorAll("#parallax__nav li a").forEach(li => {
li.parentElement.classList.remove("active");
});
li.parentElement.classList.add("active");
})
})
let nowScroll = true;
let lastScroll = 0;
function scrollProgress() {
nowScroll = true;
setInterval(() => {
if (nowScroll) {
nowScroll = false;
hasscroll();
}
}, 300);
}
function hasscroll() {
let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
document.querySelectorAll(".content__item").forEach((item,i) => {
if(scrollTop >= item.offsetTop -2){
document.querySelectorAll("#parallax__nav ul li").forEach(li => {
li.classList.remove("active");
});
document.querySelector(`#parallax__nav ul li:nth-child(${i+1})`).classList.add("active");
}
})
if (scrollTop < lastScroll) {
document.getElementById("parallax__nav").classList.add("show");
} else {
document.getElementById("parallax__nav").classList.remove("show");
}
lastScroll = scrollTop;
console.log("lastScroll: " + lastScroll);
console.log("scrollTop: " + scrollTop);
}
window.addEventListener("scroll", scrollProgress)