• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 스크롤 헤더 고정시키기(position: sticky)

앞서 position에 대해서 요소가 배치되는 방식에 대해서 배웠습니다. 그 중, position: sticky에 대해서 자세히 배워보겠습니다.

화면 기록 2024-08-01 오후 4.30.58.mov

position: sticky는 웹 페이지나 특정 요소가 스크롤을 할 때 특정 위치에 고정되는 기능입니다.

스티키 요소는 일반적인 문서 흐름 내에서 배치되지만, 스크롤이 특정 임계점을 넘어설 때 고정됩니다. 이 임계점은 보통 top, bottom, left, right 등의 속성으로 지정됩니다.

• 임계점 이전: 요소는 문서의 일반적인 흐름에 따라 움직입니다.
• 임계점 이후: 요소가 고정되고, 스크롤을 계속해도 해당 위치에 머물러 있습니다.

sticky vs fixed

스티키와 고정(position: fixed;)의 차이점을 이해하는 것도 중요합니다:

• 스티키(position: sticky;):
  • 스크롤을 따라 이동하다가 특정 임계점에서 고정됩니다.
  • 요소의 부모 영역을 기준으로 동작합니다.
  • 부모 요소를 벗어나지 않습니다.
• 고정(position: fixed;):
  • 항상 고정된 위치에 머뭅니다.
  • 스크롤과 상관없이 브라우저 창을 기준으로 동작합니다.
  • 화면 내에서 위치가 변하지 않습니다.

📝 실습 코드