Notice
Recent Posts
Recent Comments
Link
초짜코딩의 잡동사니
parallaxEffect03 - 숨긴메뉴 본문
let nowScroll = true;
let lastScroll = 0;
function scrollProgress(){
nowScroll = true;
setInterval(()=>{
if(nowScroll){
nowScroll = false;
hasScroll();
}
}, 300);
}
function hasScroll(){
let scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop
if(scrollTop < lastScroll){
document.querySelector("#parallax__nav").classList.add("show")
}else{
document.querySelector("#parallax__nav").classList.remove("show")
}
lastScroll = scrollTop;
document.querySelectorAll(".content__item").forEach((element, index) => {
if(scrollTop >= element.offsetTop - 2){
document.querySelectorAll("#parallax__nav ul li").forEach( li => {
li.classList.remove("active");
})
document.querySelector("#parallax__nav ul li:nth-child("+(index+1)+")").classList.add("active")
}
})
document.querySelector(".scrollTop span").innerText =Math.round(scrollTop);
}
window.addEventListener("scroll", scrollProgress)
'Script Sample > parallax effect' 카테고리의 다른 글
parallaxEffect06 - 텍스트 효과 (0) | 2022.03.11 |
---|---|
parallaxEffect05 - 이질감 효과 (0) | 2022.03.11 |
parallaxEffect04 - 나타나기 (0) | 2022.03.11 |
parallaxEffect02 - 사이드메뉴 (0) | 2022.03.11 |
parallaxEffect01 - 메뉴이동 (0) | 2022.03.11 |