반응형
Sticky Nav
목표
웹 브라우저에 많이 쓰이는 상단에 네비게이션바 고정을 자바스크립트로 구현
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky Nav</title>
<link rel="stylesheet" href="style-START.css">
</head>
<body>
<header>
<h1>A story about getting lost.</h1>
</header>
<nav id="main">
<ul>
<li class="logo"><a href="#">LOST.</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Maps</a></li>
</ul>
</nav>
<div class="site-wrap">
<p>Lorem ipsum dolor sit amet</p>
<img src="http://unsplash.it/400/400" class="align-right slide-in">
<p>Lorem ipsum dolor sit amet</p>
</div>
<script>
</script>
</body>
</html>원래 쓸모없는 내용이 많지만 다 짤랐음, CSS속성도 따로 작성하지 않았음
과정
- 상수, 변수 생성
- 스크롤시 상단에 nav바를 고정하도록 함수 생성 및 실행
코드 분석
1. 상수, 변수 생성
const nav = document.querySelector('#main');
let topOfNav = nav.offsetTop;nav에 id가 main인 태그를 담고, topOfNav에 nav태그의 상단 좌표값을 담음
2. 스크롤시 상단에 nav바를 고정하도록 함수 생성 및 실행
const fixNav = () => {
if(window.scrollY >= topOfNav) {
document.body.style.paddingTop = nav.offsetHeight + 'px';
document.body.classList.add('fixed-nav');
} else {
document.body.classList.remove('fixed-nav');
document.body.style.paddingTop = 0;
}
}
window.addEventListener('scroll', fixNav);fixNav에 스크롤을 nav바의 높이 이상으로 내리면 fixed-nav 클래스를 추가해 nav의 상단에 패딩을 줘서
스크롤을 내려도 상단에 nav바가 고정되도록 함.
그 이하만큼 스크롤한다면 fixed-nav 클래스를 삭제하고 패딩을 0으로 줌
스크롤을할 때 fixNav 함수를 실행
찾아본 내용, 알게된 내용들
offset() - 문서에서 요소의 상대적인 위치를 알아낼 때 사용