페이지 전체를 스크롤 시, 가운데에 있는 div 영역을 상단에 고정시키고 일정 내용들은 그대로 스크롤 하고 싶을 때는 sticky를 사용한다. 단, IE에서 먹지않음!!!!
fixed와 sticky의 차이점은??
- fixed : 페이지 화면 내 절대적인 위치에 고정
- sticky : 가장 가까운 부모 element를 기준으로 배치 ( 부모 필요 )
각각의 콘텐츠마다 고정해야 되는 내용이 달라져야 되는 경우에는 sticky를 이용하면
좀 더 콘텐츠에 맞는 내용을 고정시켜 사용자에게 명확한 정보를 전달해줄 수 있다.
<body>
<div style="height:10000px; background-color: tomato;">
<div style="height:100px; background-color: green;">
Header
</div>
<div class="circle fixed">Fixed</div>
<div class="circle sticky">Sticky</div>
<div class="circle absolute">Absolute</div>
<p class="pb-100"> </p>
</div>
</body>
주의사항
sticky요소의 전체 부모요소 중에 overflow: auto,overflow: hidden,overflow: scroll 가 적용된 부모가 있으면 sticky가 안먹는다.
출처
https://manbalboy.github.io/front/css-layout-07.html
[CSS] CSS Layout 의 기본 (4.position - fixed, sticky)
CSS layout, box-model, margin collapse, position, box-sizing
manbalboy.github.io
https://ordinary-code.tistory.com/106
[css] 레이아웃 구성 시 position fixed 와 sticky 차이 알아보기
스마트폰이 요즘 많이 보급되면서 PC 홈페이지의 레이아웃 중 스크롤이 강조된 레이아웃들이 많이 등장하고 있다. 그중 스크롤을 내리면서 나타나는 애니메이션 효과도 점점 발전하고 있다. 오
ordinary-code.tistory.com
스크롤에 반응하는 sticky header 만들기
내비게이션 메뉴에 대한 접근성을 높이기 위해스크롤에 상관없이 header를 항상 화면 상단에 고정시키는 sticky header를 많이들 사용한다.페이지 어디서든 header 메뉴에 접근할 수 있지만 항상 header
velog.io
'Development > CSS & SCSS' 카테고리의 다른 글
| CSS 모듈 (0) | 2022.06.15 |
|---|---|
| position:absolute 부모 높이 인식 (0) | 2022.06.08 |
| 카테고리 탭 구현하기 (0) | 2022.05.13 |
| 반응형 웹 단계별 해상도 (0) | 2022.05.03 |
| display none이 transition이 안먹히는 이유 (0) | 2022.04.30 |