How To - 스크롤 헤더

w3.css

CSS를 사용하여 스크롤 시 고정/고정 헤더를 만드는 방법을 알아보자.

위에서 시작하는 선형 그라데이션 배경색을 만든다. 청록색/녹색에서 파란색으로 시작한다.

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

헤더 스타일을 지정한다. 스크롤 위치에 도달했을 때 헤더가 고정되도록 position:sticky 및 top:0을 추가한다.

.header {
  position: sticky;
  top: 0;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

기본 예시

position: sticky; 사용자의 스크롤 위치를 기준으로 요소가 배치된다.

Sticky 요소는 스크롤 위치에 따라 relative와 fixed 사이를 전환한다. 뷰포트에서 주어진 오프셋 위치가 충족될 때까지 상대적으로 배치되며 그런 다음 제자리에 “고정”(예: position:fixed)된다.

⭐ 고정 위치 지정이 작동하려면 top, right, bottom 또는 left 중 하나 이상을 지정해야 한다.

W3C School - How TO - On Scroll Header

Mingg`s Diary

밍구

공부 목적 블로그