다양한 Sticky 스펙을 구현하는 방법 (vanila js)
웹 (WEB)/공부 2022. 2. 2. 16:15

Sticky 스펙을 구현하는 방법 스펙에 필요한 조건을 하나씩 추가해가면서 어떻게 해결할 지를 고민해보자. css의 poistion: sticky; 를 이용하자. 우선 Sticky되어야 하는 Element가 최상단에 위치해있다면 쉽다. css를 이용하면 position: relative; 인 부모의 상단에 해당 Element가 sticky된다. .sticky{ position: sticky; top: 0; } https://codepen.io/bucketressi/pen/GROoeKE Sticky-1 ... codepen.io sticky container를 만들자. 이번에는 sticky header(첫번째 Sticky Element) 아래에 sticky sub-header가 위치해야 한다고 생각해보자...