navigation bar / header가 아닌 스크롤 하다가 해당 컨텐츠가 지나갈 때, 컨텐츠를 fix 시키고 싶을 떄가 있다. 예를 들면.. 컨텐츠의 topic을 모아둔 bar 를 고정하고 스크롤을 내려도 해당 bar는 상단에 고정되어 있는 경우이다. 이럴 때, position 속성을 사용하는데, fixed가 아닌 sticky를 쓴다.
fixed는 부모요소가 window이기 때문에 위에 해당하는 topic bar를 고정하기에는 js와 함께 동작(offset 위치와 scroll 위치 비교) 해야하기 때문에 번거로움이 있다.
그렇다면 sticky는 어떻게 사용할 수 있을까?
- 우선
position: sticky속성은 자신의 바로 위의 부모요소 내에서만 적용된다. - 부모 요소들 중에서
overflow속성이 적용된 것이 있으면 동작하지 않는다. - 바로 위 부모 요소에 height가 적용되어 있는지 확인한다.
height: 100%; // % 속성은 적용 불가
height: auto;
height: 100px;
height: 100vh;
