javascript/jQuery

[JAVASCRIPT/JQUERY]스크롤 이벤트를 이용한 header 만들기

알찬 퍼블리셔 2019. 4. 11. 11:40
728x90
반응형

스크롤을 감지해서 

 

스크롤을 내리면 header가 상단으로 고정되고 형식이 바뀝니다. 

 

다시 스크롤을 올리면 원래되로 되돌아옵니다. 

 

mousewheel 이벤트를 이용해서 스크롤을 감지합니다.

 

e.originalEvent.wheelDelta; 값을 이용해 스크롤을 올리고있는지 내리고 있는지 감지합니다.

 

 

$(window).scrollTop(); 현재 스크롤의 위치를 가져옵니다. 

 

 

addClass와 removeClass를 이용해 다른 css를 적용해줍니다. 

 

 

 

 

 

728x90
반응형