Notice
Recent Posts
Recent Comments
Link
초짜코딩의 잡동사니
parallaxEffect01 - 메뉴이동 본문
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
})
'Script Sample > parallax effect' 카테고리의 다른 글
parallaxEffect06 - 텍스트 효과 (0) | 2022.03.11 |
---|---|
parallaxEffect05 - 이질감 효과 (0) | 2022.03.11 |
parallaxEffect04 - 나타나기 (0) | 2022.03.11 |
parallaxEffect03 - 숨긴메뉴 (0) | 2022.03.11 |
parallaxEffect02 - 사이드메뉴 (0) | 2022.03.11 |