웹 페이지를 아래로 스크롤해도 화면 상단에 계속 붙어 있는 내비게이션 바, 즉 '스티키(sticky) 내비게이션 바'를 만들려면 CSS의 position: sticky; 속성을 사용하면 됩니다.
position: sticky는 평소에는 일반적인 문서 흐름대로 배치되다가, 스크롤 위치가 지정한 임계점(top, bottom 등)에 도달하면 해당 지점에 고정되는 동작 방식입니다. 참고로 이 속성이 정상적으로 작동하려면 top: 0;처럼 오프셋 값을 반드시 하나 이상 지정해야 한다는 점을 기억하세요.
예제
아래 전체 코드를 복사해 브라우저에서 실행한 뒤 페이지를 스크롤해 보세요. 주황색 내비게이션 바가 화면 최상단에 고정되어 있는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
position: sticky;
overflow: hidden;
top: 0;
width: 100%;
}
li {
float: left;
border-right: 1px solid white;
}
li a {
display: block;
padding: 8px;
background-color: orange;
}
li:last-child {
border-right: none;
}
div {
padding:5px;
margin-top:5px;
background-color:white;
height:1000px;
}
</style>
</head>
<body>
<ul>
<li><a href = "#home">Home</a></li>
<li><a href = "#news">News</a></li>
<li><a href = "#contact">Contact</a></li>
<li><a href = "#about">About</a></li>
</ul>
<div>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 확인용 데모 텍스트입니다.</p>
</div>
</body>
</html>
코드 핵심 포인트
- ul —
list-style-type: none;으로 목록의 기본 불릿 마커를 제거하고,position: sticky;와top: 0;조합으로 스크롤 시 뷰포트 최상단에 고정됩니다. - li —
float: left;로 각 메뉴 항목을 가로 방향으로 나열하고,border-right로 메뉴 사이에 흰색 구분선을 추가합니다. - li a —
display: block;과padding: 8px;로 링크의 클릭 영역을 넓혀 사용성을 높이고,background-color: orange;로 배경색을 지정합니다. - li:last-child — 마지막 메뉴 항목에는 오른쪽 구분선이 필요 없으므로
border-right: none;으로 제거합니다. - div — 높이 1000px의 콘텐츠 영역을 만들어 실제 스크롤이 발생하도록 하며, 이를 통해 내비게이션 바가 고정되는 효과를 쉽게 확인할 수 있습니다.
이처럼 position: sticky;는 자바스크립트 없이 CSS만으로 간단하게 고정 헤더나 사이드바를 구현할 수 있는 유용한 속성입니다.