parallaxEffect01

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect01.html

document.querySelectorAll("#parallax__nav li a").forEach(li => {	//아이디 parallax__nav의 li태그의 a태그들 선택해서 index값 li에 저장
	li.addEventListener("click", (e) => {			//li를 클릭했을 때 이벤트 설정
    	e.preventDefault();				//클릭했을 때 이벤트 초기화(a태그 초기화)
    	document.querySelector(li.getAttribute("href")).scrollIntoView({	//li의 href값으로 이동
        	behavior:"smooth";		//부드럽게 이동
        });
    });
});

window.addEventListener("scroll", () => {		//브라우저에 스크롤 했을 때 이벤트 설정
	let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;		
    //변수 scrollTop에 브라우저의 pageYOffset값 또는 html의 scrollTop값 또는 브라우저의 scrollY값 저장
    
    document.querySelectorAll(".content__item").forEach((element, index) => {		//클래스 content__item들 선택해서 element값을 element에 index값을 index에 저장
        if(scrollTop >= element.offsetTop - 2){		//scrollTop값이 element의 offsetTop-2 보다 크거나 같을 때 
        	document.querySelectorAll("#parallax__nav li").forEach(li => {		//아이디 parallax__nav의 li태그들을 선택해서 index값을 li에 저장
            	li.classList.remove("active");		//li에서 클래스 active 삭제
            });
            document.querySelector(`#parallax__nav ul li:nth-child(${index+1})`).classList.add("active");		//아이디 parallax__nav의 index+1번째 li태그에 클래스 active 추가
	};
    });
});