CSS와 JavaScript를 활용하면 페이지를 스크롤할 때 화면 상단에 고정되는 스티키(sticky) 헤더를 쉽게 구현할 수 있습니다. 핵심 원리는 JavaScript의 scroll 이벤트를 감지하여, 스크롤 위치가 헤더의 원래 위치를 넘어서면 CSS 클래스를 추가해 position: fixed 속성을 적용하는 것입니다.
동작 원리
이 기능은 다음 세 가지 요소로 구성됩니다.
- CSS:
.sticky클래스에position: fixed와top: 0을 지정하여 요소를 뷰포트 최상단에 고정합니다. - JavaScript:
window.onscroll이벤트로 스크롤을 감지하고, 현재 스크롤 위치(window.pageYOffset)가 헤더의 초기 오프셋(offsetTop)보다 크면 클래스를 추가합니다. - 클래스 토글: 스크롤이 위로 올라가면 클래스를 제거하여 헤더가 원래 자리로 돌아가도록 합니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
padding: 0px;
height: 150vh; /*스크롤바 생성을 위한 높이*/
}
.header {
width: 100%;
background-color: rgb(52, 21, 110);
color: white;
padding: 50px;
font-size: 20px;
}
div.sticky {
position: fixed;
top: 0;
}
</style>
</head>
<body>
<h1>스크롤 시 고정 헤더 예제</h1>
<h2>헤더 텍스트 1</h2>
<h2>헤더 텍스트 2</h2>
<div class="header">Header Text</div>
<p style="font-size: 35px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus esse
consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur ipsa earum
veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo soluta quidem porro
quia. Dolore reprehenderit cum voluptatibus eius assumenda ipsam tenetur asperiores magni
aliquid eligendi doloribus quidem ipsa et praesentium provident molestias quaerat laboriosam,
veniam aspernatur repellendus. Debitis sapiente, odit iste voluptatibus nesciunt veritatis
incidunt mollitia nostrum, vitae suscipit iusto molestias consequuntur rem facere perspiciatis
ad! Ratione reiciendis asperiores aperiam vitae facilis accusantium non aliquid, facere
cupiditate reprehenderit tempore veritatis eum accusamus omnis
tempora quos!
</p>
<script>
window.onscroll = function() {
setSticky();
};
var header = document.querySelector(".header");
var sticky = header.offsetTop;
function setSticky() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
}
else {
header.classList.remove("sticky");
}
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
페이지를 아래로 조금만 스크롤하면 헤더가 화면 상단에 고정되어 계속 표시됩니다.
참고 사항
최신 브라우저에서는 JavaScript 없이 CSS의 position: sticky 속성만으로도 유사한 효과를 구현할 수 있습니다. 다만 본문 내 특정 지점부터 고정하거나, 고정 여부에 따라 추가 스타일(그림자, 축소 등)을 적용해야 하는 경우에는 위와 같은 JavaScript 방식이 더 유연하게 대응할 수 있습니다.