CSS position:sticky 스크롤시 왼쪽 고정

예제 코드 및 예제 실행

블로그 또는 쇼핑몰에서 왼쪽은 메뉴 영역이고, 오른쪽은 방대한 양의 콘텐츠 영역일 경우 스크롤 시 왼쪽 메뉴 영역이 사라지면서, 메뉴를 보기 위해 다시 상단으로 다시 가야 하는 불편함이 있습니다. 이럴 때 CSS로 간단히 처리하는 예제입니다.

예제코드

<div style="display:flex; flex-direction:row; gap: 20px; width:100%;">
  <div style="flex:1.5; position:relative">
    <div style="border-radius:10px; background-color:#eee; padding:30px; position:sticky; top:50px;">
      고정
    </div>
  </div>
  <div style="flex:1.5">
    <div style="border-radius:10px; background-color:#ddd; padding:30px; height:1024px;">
      스크롤
    </div>
  </div>
</div>

예제실행

고정

스크롤

마무리

위 예제처럼 CSS positon(sticky)을 이용해서 웹페이지가 스크롤이 되어도, 왼쪽 메뉴 영역은 고정이 되도록 처리하는 방법입니다. CSS 너무 좋은 것 같습니다.