CSSで position: sticky 가 적용되지 않을 때

position: sticky의 활용

스크롤과 연동하여 특정 요소를 화면에 고정시키는, 넘넘 편리한 position: sticky。
전에는 position: fixed와 javascript를 써서 만들 수 밖에 없었지만, sticky 속성이 추가되어 아주 편해졌죠!
이녀석을 활용하면 스크롤 할 때 따라오는 헤더라든가 사이드바의 배너등, 여기저기 응용해서 쓸 수가 있습니다.

어떤건지 감이 잘 안 오시는 분은 아래 샘플을 스크롤 해 보세용.
(이 페이지를 보고 계신다는건 sticky를 잘 모르시는 분은 아니시게지만서두.ㅎㅎ)

See the Pen
sticky01 by Bong yiroon (@boltmanber)
on CodePen.

위 샘플에서 눈치 채셨겠지만、sticky 속성을 갖는 요소는、자신의 바로 위의 부모요소 안에서만 적용됩니다.
페이지 전체에서 적용을 시키려면 body 태그 같은 페이지 전체를 감싸고 있는 태그 바로 아래의 자식요소로 배치를 할 필요가 있겠네요.

See the Pen
sticky02 by Bong yiroon (@boltmanber)
on CodePen.

가끔「sticky를 적용한 요소가 유일한 자식요소일 경우에는 제대로 동작하지 않는다」고 하시는 분이 계시는데 그건 틀립니다. 유일한 자식요소라고 하더라도 부모요소가 충분한 height를 가지고 있다면, 그 범위내에서 동작합니다.

See the Pen
sticky03 by Bong yiroon (@boltmanber)
on CodePen.

사용시 주의점

sticky요소의 전체 부모요소 중에 overflow: auto、overflow: hidden、overflow: scroll 가 적용된 부모가 있으면 sticky가 안 먹습니다.

See the Pen
sticky04 by Bong yiroon (@boltmanber)
on CodePen.

어떠셨어요?
그럼 편리한 sticky를 활용해서 멋진 홈피 만드세요!

sticky의 서포트 브라우저는 여길 참조.
https://caniuse.com/#feat=css-sticky

하여간, 이누무 ie11이 빨리 전멸해야되는데…

Buy me a coffee