내일을 위한 오늘

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

IT·컴퓨터/css

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

안경쓴루피 2022. 8. 25. 06:07
반응형

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

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

해서 만들어보았습니다.

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

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

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

 

 

 

 

 

 

 

 

 

 

728x90
반응형
Comments