[HTML/CSS]스크롤 시 상단에 고정하고 싶다면? position: sticky 사용하기!

다음과 같이 스크롤 시 필더바를 상단에 고정시키고 싶다면?

 

.

.

 

 

 

position: sticky를 사용하면 된다.

 

 

 

 

 

sticky : 최초 relative속성과 같이 동작하다가 , 스크롤시 지정 지점에서 요소를 고정시킨다.

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

 

 

주의) position sticky가 동작안하는 이유

1. 자신의 부모 요소 범위 안에서만 동작 됨!!

2. 부모태그에 무조건 height 높이 값이 들어가 있어야함. (부모  height 높이 값만큼 sticky가 고정)

3. 부모요소중에 overflow: hidden, auto, scroll 속성이 적용되어 있으면 안됨

 

 

- 끝 -