반응형
기본 코드
<!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">
<img src="http://unsplash.it/400/400" class="align-right slide-in">
</div>
<script>
</script>
</body>
</html>
중간에 들어간 텍스트들은 너무 많을뿐더러 주제와 맞지않아서 제외했다.
목표
자바스크립트를 이용하여 상단에 있는 메뉴바를 스크롤이 내려가더라도 그대로 유지해보자.
코드 분석
const nav = document.querySelector('#main');
const topOfNav = nav.offsetTop;
function fixNav() {
if(window.scrollY >= topOfNav) {
document.body.style.paddingTop = nav.offsetheight + 'px';
document.body.classList.add('fixed-nav');
} else {
document.body.style.paddingTop = 0;
document.body.classList.remove('fixed-nav');
}
}
window.addEventListener('scroll', fixNav);
이번 내용은 많지 않기 때문에 작동 원리에 대해서 간단하게 적어보겠다.
필요한 변수를 설정해 놓은 다음, 스크롤이 내려가서 메뉴바가 보이지 않게 되면 body.classList에 새로운 항목을 추가해주고 그것에 대한 스타일을 적용하여 지속적으로 상단에 위치할 수 있도록 설정, 그렇지 않다면 다시 항목을 제거해 준다는 내용이다.
마무리
단순하게 스크롤을 고정하기만 하는 CSS의 속성과 달리 사라지게 되는 시점부터 다른 변화를 같이 줄 수 있는 점에서 새로웠다.
끝.
반응형
'개발 > JavaScript 30' 카테고리의 다른 글
| 26. Stripe Follow Along Nav (0) | 2017.04.26 |
|---|---|
| 25. Event Capture, Propagation, Bubbling and Once (0) | 2017.04.26 |
| 23. Speech Synthesis (0) | 2017.04.26 |
| 22. Follow Along Link Highlighter (0) | 2017.04.26 |
| 21. Geolocation (0) | 2017.04.26 |
