CSS position:sticky로 헤더·타일 화면 상단에 고정시키기
페이지 정보
조회 191회
작성일 23-10-23 13:35
position:sticky를 이용해 헤더나 타일 요소를 스크롤 중 화면에 고정시키는 방법을 보여주는 CodePen 예제다. 스크롤 위치가 top 기준점을 지나기 전에는 일반 문서 흐름을 유지하다가, 지나간 뒤에는 화면에 붙어 따라오는 sticky 동작을 JavaScript 없이 CSS만으로 구현한다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
- 이전글문장의 span에 예쁘게 백그라운드(형광펜) 넣기 23.10.23
- 다음글순수 CSS로 3단 폭포수(Waterfall) 레이아웃 만들기 23.09.01