내일을 위한 오늘

웹사이트 헤더 영역이 상단에 고정되기를 바라면서도, 스크롤을 내릴 때는 그 높이가 줄어들기를 원할 때가 있습니다. 그냥 딱딱하게 줄어들게 해도 되지만, 이왕이면 보기 좋게 부드럽게 줄어들었다가 다시 늘어났다가 할 수 있다면 더~욱 좋겠지요~ 해서 만들어보았습니다. css 기능 중에서 transition 을 이용하면 쉽게 구현할 수 있습니다. 여기서는 scrolled 라는 클래스명을 이용해 만들어보겠습니다. javascript 로는 스크롤시에 scrolled 라는 클래스를 더하거나 빼도록 하면 됩니다. 아래 내용을 참고 해주세요. HTML 삽입 미리보기할 수 없는 소스