페이지를 아래로 스크롤해도 화면 상단에 계속 붙어 있는 내비게이션 바(스티키 내비바)를 만들려면 CSS의 position: sticky; 속성을 사용하면 됩니다. 별도의 JavaScript 없이 순수 CSS만으로 간단하게 구현할 수 있어 가장 널리 쓰이는 방식입니다.
position: sticky의 동작 원리
sticky는 평소에는 relative처럼 문서 흐름을 그대로 따르다가, 스크롤 위치가 지정한 임계점(예: top: 0)에 도달하는 순간 fixed처럼 해당 자리에 고정됩니다. 즉, 요소가 뷰포트 상단에 닿기 전까지는 일반적인 배치를 유지하고, 닿은 이후에는 항상 화면에 붙어 있게 됩니다.
예제 코드
아래 예제를 실행하면 목록 형태의 메뉴가 상단에 고정되는 것을 확인할 수 있습니다.
<!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">홈</a></li>
<li><a href="#news">뉴스</a></li>
<li><a href="#contact">연락처</a></li>
<li><a href="#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>코드 핵심 포인트
- list-style-type: none; — 목록 앞의 불릿(•) 기호를 제거해 메뉴처럼 보이게 합니다.
- position: sticky; top: 0; — 스티키 동작의 핵심입니다. 반드시 top, bottom, left, right 중 하나 이상의 기준값을 지정해야 고정 위치가 정해집니다.
- float: left; — 각 메뉴 항목(li)을 가로로 나란히 배치합니다.
- height: 1000px; — 데모용 div에 충분한 높이를 부여해 스크롤 시 내비바가 고정되는 모습을 확인할 수 있습니다.
주의 사항
sticky는 부모 요소 중 하나라도 overflow: hidden, overflow: auto, overflow: scroll이 설정되어 있으면 정상적으로 작동하지 않을 수 있습니다. 또한 부모 컨테이너의 높이가 부족하면 스크롤 범위 안에서만 고정되므로, 전체 페이지에서 고정되길 원한다면 body 직속 자식으로 배치하는 것이 안전합니다.