초짜코딩의 잡동사니

parallaxEffect01 - 메뉴이동 본문

Script Sample/parallax effect

parallaxEffect01 - 메뉴이동

초짜코딩 2022. 3. 11. 16:02

document.querySelectorAll("#parallax__nav li a").forEach(li => {
li.addEventListener("click", (e)=>{
    e.preventDefault();
    document.querySelector(li.getAttribute("href")).scrollIntoView({
        behavior: "smooth"
    })
})
})

window.addEventListener("scroll", () =>{
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;

// for(let i=1; i<=9; i++){
//     if(scrollTop >= document.getElementById("section"+i).offsetTop - 2){
//         document.querySelectorAll("#parallax__nav ul li").forEach( li => {
//             li.classList.remove("active");
//         })
//         document.querySelector("#parallax__nav ul li:nth-child("+i+")").classList.add("active")
//     }
// }

// forEach
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")
    }
})



  //info
  document.querySelector(".scrollTop span").innerText = scrollTop;

  document.querySelector(".offset1").innerText = document.getElementById("section1").offsetTop
  document.querySelector(".offset2").innerText = document.getElementById("section2").offsetTop
  document.querySelector(".offset3").innerText = document.getElementById("section3").offsetTop
  document.querySelector(".offset4").innerText = document.getElementById("section4").offsetTop
  document.querySelector(".offset5").innerText = document.getElementById("section5").offsetTop
  document.querySelector(".offset6").innerText = document.getElementById("section6").offsetTop
  document.querySelector(".offset7").innerText = document.getElementById("section7").offsetTop
  document.querySelector(".offset8").innerText = document.getElementById("section8").offsetTop
  document.querySelector(".offset9").innerText = document.getElementById("section9").offsetTop
})