(13)JavaScript중급_4_이벤트 활용_Scroll이벤

＃알아야 할 개념 :

● 개념_1 : Scroll 관련 이벤트 객체

○  event.type (Only one)

• 브라우저 창 기준 scroll을 했을 시, 발생하는 event.type : 'scroll'

● 개념_2 : Scroll의 객체는 event객체가 아닌, window객체, window객체 + addEventListener()를 한다.

• window객체의 프로퍼티 : scrollY //브라우저 창 기준, 몇px만큼 아래로 scroll 했는지 값을 반환
• window.addEventListener('scroll' , function);

 

● 개념_3 : 주요 활용 법

○ 활용1 : scrollY를 몇 px 이상 내려갈 시, 다른 태그(ex_header_nav)가 그림자 효과 생기도록 코드 구현

const headNav = document.querySelector('#nav');

window.addEventListener('scroll', function(){
	
    const STANDARD = 30;
    
    if(window.scrollY>30)
	{
    	headNav.classList.add('shadow');
	}
    else
    {
    	headNav.classList.remove('shadow');
	}
});