[ Rendering Logic2 ] Sticky Positioning

Sticky Positioning 

position : sticky는 스크롤 할 때 요소가 상태적인 위치에서 고정위치로 전환되는 속성입니다.

position : sticky 뿐만 아니라 top, right, left, bottom등 하나 이상을 선택해야 수행이 된다.

 

Sticky position에는 몇가지 특이한 세부사항이 있는데 이를 살펴보자!

 

Stays in their box

position : sticky가 자주 간과되는 것은 상위 컨테이너에서 외부 스크롤을 따르지 않는다는 것이다.

고정요소는 상위 컨테이너가 보이는 동안에만 고정이 됩니다.

아래를 보면 스크롤을 내리면 상위 컨테이너에서 벗어나는 것을 확인 할 수 있습니다!

스크롤을 내리지 않았을 때.

스크롤을 내릴 때

 

만약 스크롤을 내릴 때 어떤 컨텐츠와의 인접성을 유지되게 하고 싶으면 이를 활용하여 개발할 수 있습니다!

아래의 예시를 보면 Section1, 2, 3가 내려도 컨텐츠 옆에 붙어서 유지되는 것을 확인 할 수 있다. 

아래의 코드를 통해서 이를 구현할 수 있다. 

section h2 {
  position: sticky;
  top: 0;
}

 

---

Offset

position value는 top/right/left/bottom이 작동하는 방식에 영향을 준다.

• 상대 위치지정을 사용하면, 자연스러운 유입 위치에서 이동한다.
• 절대 위치 지정을 사용하면, 요소를 포함하는 블록의 가장자리에서 멀어진다.
• 고정 위치 지정을 사용하면 뷰포트 기반으로 요소가 조정이 된다.

아래의 예시처럼 .sticky에  position: sticky;width: 50px; height: 50px;를 주고 각각 다른 공에 top설정을 다르게 지정한 후

스크롤을 내리면 아래의 사진처럼 작동합니다.

Not Incorporeal 무형적이 않다

정적이거나 상대적인 형제가 있는 경우 절대, 고정요소가 존재하지 않는 것처럼 배치된다.

예시를 보는 것이 이해가 쉬운데, 스크롤을 내릴경우 형제 요소들은 고려하지 않고 위로 겹쳐지는 것을 확인할 수 있다.

 

Horizontal stickiness

고정위치는 거의! 수직 스크롤과 함꼐 사용되지만 반드시 그럴 필요는 없다.

아래는 수평으로의 예이다.

 

Trouble Shooting 

position : sticky 가 적용되지 않는 경우들이 종종있는데, 몇 가지 이유에 대해서 알아보자.

 A parent is hiding / mamging overflow

가장 흔한 이유인데 부모요소의  overflow: auto; 가 있는 경우 해당 이슈가 생긴다.

우리가 overflow에 hiddent이나 scroll이나, auto를 설정하는 경우 내부에서의 context만 stick이고 더 큰 context에서는 반영이 되지 않는다.

그 이유는 더 큰 context가 스크롤이 가능할 때만 요소의 sticky가 동작을 한다

 

position : sticky는 상위 한개의 context에서만 작동하므로, main에 scroll가능하도록 만들던지, 조상 요소의 해당 요소를 붙인다.

 

The container isn't big enough

sticky요소가 상위 컨테이너내에서 이동할 공간이 있는지 확인을 해라

sticky요소는 뷰포트를 따르기 때문에 상위컨테이너에서 공간이 있는 경우만 sticky요소가 작용한다

 

The sticky element is stretched

flex, gird속성을 사용한 경우에는 요소가 상위 컨테이너에서 움직일 공간이 없도록 만들기 때문에 sticky요소가 cross축을 따라 늘어나는 것이 가능하다.

 

There's a thin gap above my sticky header!

뷰포트 가장 자리를 기준으로 요소를 배치하려는 경우 얇은 1px 의 간격이 생긴다. 이것은 화소에 대한 반올림 문제인데

아래의 코드 스니펫으로 이를 해결할 수 있다.

header {
  position: sticky;
  top: -1px; /* -1px instead of 0px */
}