HTML, CSS로 간단하게 구현하는 Sticky Header

Sticky Header라는 것은 이름에서도 느껴지다시피, 스티커처럼 어딘가 달라붙는 header를 이야기합니다. 이를테면 화면 스크롤하다가 특정 요소가 어느 위치에 도달하면, 그때부터 스크롤하는 동안 계속 고정된 위치를 가집니다.

예시를 보는 것이 가장 빠르겠죠?

아래 codepen 화면에서 스크롤을 내리다보면 어느순간 정상적인 흐름을 벗어나 위치가 고정되는 요소가 있을겁니다.

그리고 다시 위로 올리면 원래대로 스크롤의 흐름에 편입돼 기존의 컨텐츠들처럼 함께 스크롤 되죠.

과거에는 자바스크립트를 이용해서 특정 html element의 위치를 감지해 style의 상태를 변화시키는 방식으로 제어를 했습니다만, 이러한 기능들이 반복적으로 자주 쓰이다보니 CSS로 간편하게 사용할 수 있도록 기능이 추가 되었습니다.

그래서 position:sticky와 top:0 만으로 아주 간단하게 Sticky Header를 구현할 수 있습니다.

콘텐츠의 양이 많을 경우엔 스크롤 이벤트를 계속 감시한다는게 꽤 버거운 일이 될 수 있기 때문에, CSS에 이 기능이 추가됐을때 정말 반가웠습니다.

샘플상품 1 - 엉클페이퍼

엉클페이퍼엉클페이퍼

위의 링크는 실제로 sticky header를 이용해서 어떤 식으로 활용할 수 있는지 카페24 쇼핑몰에 상세페이지에 적용한 예시입니다. 이런 식으로 응용을 하면, 조금 더 사용자에게 편의를 제공할 수 있습니다.