sticky header

🎨 position sticky - 위에 헤더를 고정하자

네비게이션 헤더 고정하기 대다수의 사이트가 상단 네비게이션 영역 부분이 스크롤을 내리면 같이 따라 내려오는 페이지 요소를 한번 쯤은 봐왔을 것이다. 이전에는 이러한 기능을 만들려면 자바스크립트로 복잡한 구성을 하여야 했지만 이제는 간단하게 css의 position: sticky 속성으로 구현이 가능하다. 예를들어 아래와 같이 요소 영역 부분을 스크롤을 내려도 상단에 고정시키고 싶다면, Logo Menu1 Menu2 Menu3 내용 ... See the Pen position-sticky-0 by barzz12 (@inpaSkyrim) on CodePen. 아래와 같이 속성을 설정해주면 상단 헤더 고정이 되게 된다. header { ... position: sticky; top: 0; } See the P..

인파_

2021.10.20