[CSS] position: sticky - 화면 고정인 네비게이션바

sticky vs fixed는 무엇인가? 스크롤할 때 웹 내부 요소를 유지하도록 도와주는 CSS 속성이다.

• position: sticky 
• position: fixed

그렇다면 이 두 개의 차이는 무엇일까? 

position: fixed

position: fixed는 viewport에 고정된 고정 위치에 위치하게 된다. 쉽게 말해 개발자가 지정한 위치에 있다. 개발자는 위쪽, 아래쪽, 왼쪽, 오른쪽을 지정할 수 있다.

.test {
  position:fixed;
  top : 0;
}

position: stickey

position: stickey는 오프셋 (top:10px)을 정의하기 전까지, 저 고정된 위치가 아닌 부모의 위치에 고정되어 동작한다. 부모의 위치가 스크롤에서 떠나가 되면 부모 안에서 유지하게 된다. 

Example 

좋은 예시가 있다. 한번 보면 바로 이해할수 있을 것이다. 

https://codepen.io/suryawiguna/pen/wvGeqxy 

fixed vs sticky

overflow-y: scroll

위 방법 이외의 또 다른 방법이 존재한다. 스크롤이 필요한 컨탠츠 영역에만 영역 초과 시 스크롤을 생성해 주는 방법으로 구현이 쉽게 가능하다. 

https://codepen.io/ckdtjs505/pen/RwZWEMR?editors=1100 

RwZWEMR

 

정리

고정된 위치의 navigation bar를 만든 방식에 대해 알아보았다. fixed방식은 부모의 위치와는 관계없이 개발자가 지정한 위치에 고정으로 나타난다. stick방식은 부모의 위치에 상속적으로 위치한다. 마지막으로 스크롤이 생성되는 영역에만 스크롤을 생성하여 문제를 해결할 수 있었다.