HTML 코드
<div class="scroll">
<header class="sticky">고정 헤더 — 스크롤해 보세요</header>
<p>본문 1</p><p>본문 2</p><p>본문 3</p><p>본문 4</p><p>본문 5</p><p>본문 6</p><p>본문 7</p><p>본문 8</p>
</div>
<style>
body{padding:0}
.scroll{height:100vh;overflow:auto}
.sticky{position:sticky;top:0;padding:14px 20px;font-weight:600;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
p{margin:0;padding:24px 20px;color:var(--muted);border-bottom:1px dashed var(--border)}
</style>AI에게 이렇게 요청하세요
스크롤해도 상단에 붙어 있고 스크롤하면 배경이 반투명 블러로 바뀌며 아래에 얇은 그림자가 생기는 고정 헤더로 만들어줘
<div class="scroll">
<header class="sticky">고정 헤더 — 스크롤해 보세요</header>
<p>본문 1</p><p>본문 2</p><p>본문 3</p><p>본문 4</p><p>본문 5</p><p>본문 6</p><p>본문 7</p><p>본문 8</p>
</div>
<style>
body{padding:0}
.scroll{height:100vh;overflow:auto}
.sticky{position:sticky;top:0;padding:14px 20px;font-weight:600;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
p{margin:0;padding:24px 20px;color:var(--muted);border-bottom:1px dashed var(--border)}
</style>언제 쓰나
긴 페이지에서 메뉴·검색·장바구니에 언제든 접근해야 할 때.
비슷한 것과 차이
- 헤더·내비바: 모양을 말하는 이름. “고정(sticky)“은 스크롤 시 동작을 말함 → 요청할 때 “sticky 헤더”라고 함께 쓰면 정확
position: fixed는 문서 흐름에서 빠져 본문을 가리고,sticky는 자리를 차지한 채 붙음