다양한 Sticky 스펙을 구현하는 방법 (vanila js)

 

Sticky 스펙을 구현하는 방법

스펙에 필요한 조건을 하나씩 추가해가면서 어떻게 해결할 지를 고민해보자.

 

css의 poistion: sticky; 를 이용하자.

우선 Sticky되어야 하는 Element가 최상단에 위치해있다면 쉽다. css를 이용하면 position: relative; 인 부모의 상단에 해당 Element가 sticky된다.

 

<주요코드>

.sticky{
  position: sticky;
  top: 0;
}

 

https://codepen.io/bucketressi/pen/GROoeKE

Sticky-1

 

sticky container를 만들자.

이번에는 sticky header(첫번째 Sticky Element) 아래에 sticky sub-header가 위치해야 한다고 생각해보자.

아래와 같이 간단히 구현할 수 있다. sticky 되는 container 하나로 감싸준 뒤에 해당 container에 차례로 sticky되어야 하는 Element들(sticky header, sticky sub-header)을 넣으면 된다.

 

<주요코드>

<div class='sticky'>
    <div>sticky header</div>
    <div>sticky sub-header</div>
</div>

 

https://codepen.io/bucketressi/pen/abVNKZj

Sticky-2

 

top : -height; 를 이용하자.

이제 sticky header는 페이지 최상단에 위치하지만, sticky sub-header는 페이지 중간에 위치하고 sub-header에 도달하면 sticky header 아래에 sticky되어야 한다.

 

<주요 코드>

subHeader.style = `top:${headerHeight}px`;

 

https://codepen.io/bucketressi/pen/abVNKpa

Sticky-3