스킨 만들 때 참고하면 좋은 글

스크롤하면 헤더가 줄어들거나 사라지는 자바스크립트를 잘 설명해 놓은 블로그가 있어서 링크해 둔다.

고정된 헤더(네비게이션) 사용 불편함 인지 많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 두곤 한다. 헤더 부분은 대부분 상호(브랜드)를 포함하고 네비게이션을 포함하기에 고정된 헤더에 높이가 긴 콘텐츠를 포함하고 있는 경우 오히려 사이트의 사용자경험을 떨어뜨리는 요인이 되기도 한다. 이는 모바일과 같은 뷰포트가 작은 기기들에서는 더욱 그러하다.

기존의 단순히 고정된 형태의 헤더 디자인을 제공하는 것 보다는 사용자의 스크롤 방향에 따라 헤더부분을 보여주거나 감춤으로써, 사용자의 의도에 맞는 디자인을 제공하는 것이 목적이다. 즉, 사용자의 스크롤이 아래로 향한다면 콘텐츠를 탐색하길 원하는 것이라 간주하고 헤더부분을 감추고, 스크롤이 위로 향한다면 처음으로 돌아가거나 네비게이션을 찾아 이동하는 것으로 간주하여 헤더부분을 재등장 시키는 원리이다. 이것을 원저자는 혁명이라 부르고 있다.

출처: https://webdir.tistory.com/481 [WEBDIR]

 

스크롤을 감지하여 사이트의 헤더를 보이거나 숨기기