[jQuery] 스크롤시 색상이 변하는 헤더

 

 

 

스크롤시 특정 구간에 들어갔을 때 색상이 변하는 헤더입니다.

 

 

 

 

헤더 색상을 제이쿼리 animate로 변경할 수도 있지만,

css로 해결하는 편이 성능 면에서 훨씬 유리합니다.

 

헤더 색상이 변했으면 하는 부분에 "page-start" 클래스를 추가한 후

그 부분에 스크롤이 갈 때 헤더에 "down" 클래스를 추가하게 합니다.

 

down 클래스는 transition을 이용해서 자연스럽게 색상이 변할 수 있도록 합니다.

transition을 이용하는 것이기 때문에 꼭 background-color가 아니더라도 opacity, width, height 등을 이용하여

다양하게 변형시킬 수 있습니다.

(opacity:0 -> 1 로 해서 헤더가 나타나게 한다든지, height:100px -> 50px 로 해서 헤더 높이가 줄어들게 한다든지)

 

이미지 크기를 100%로 지정했기 때문에 브라우저를 리사이즈하면 시작점이 바뀝니다.

그래서 중간에 리사이즈시 시작점의 top값을 다시 계산하는 부분을 넣었습니다.