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

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

 

.

.

 

 

 

position: sticky를 사용하면 된다.

 

 

 

 

 

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

 

 

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

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

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

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

 

 

- 끝 -