[CSS#4] 스크롤시 헤더 높이 부드럽게 줄이기

웹사이트 헤더 영역이 상단에 고정되기를 바라면서도, 스크롤을 내릴 때는 그 높이가 줄어들기를 원할 때가 있습니다. 

그냥 딱딱하게 줄어들게 해도 되지만, 
이왕이면 보기 좋게 부드럽게 줄어들었다가 다시 늘어났다가 할 수 있다면 더~욱 좋겠지요~

해서 만들어보았습니다.

css 기능 중에서 transition 을 이용하면 쉽게 구현할 수 있습니다. 
여기서는 scrolled 라는 클래스명을 이용해 만들어보겠습니다.

javascript 로는 스크롤시에 scrolled 라는 클래스를 더하거나 빼도록 하면 됩니다.

아래 내용을 참고 해주세요.