μ€ν¬λ‘€ λλ©΄ κ³ μ λλ λ©λ΄.
μ΄κΈ° μ½λ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Nav</title>
<link rel="stylesheet" href="style_JuneHyung.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, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
<img src="http://unsplash.it/400/400" class="align-left slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
<img src="http://unsplash.it/400/400" class="align-right slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
<img src="http://unsplash.it/400/400" class="align-right slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
</div>
<script>
</script>
</body>
</html>
μ΄κΈ° νλ©΄
const nav = document.querySelector('#main');
const topOfNav = nav.offsetTop;
λ©λ΄ μμκ³Ό λ©λ΄μ μλ¨ μ’νκ°μ μ μ₯ν΄λ .
function fixNav(){
// console.log(topOfNav, window.scrollY);
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');
}
}
css μΆκ°λ΄μ©
fixed-navμ λν cssλ₯Ό μΆκ° μμ±.
.fixed-nav nav{
position: fixed;
box-shadow: 0 5px rgba(0,0,0,0.1);
}
.fixed-nav li.logo{
max-width:500px;
}
λ©λ΄μ μ΅μλ¨μ΄ μ€ν¬λ‘€μ μλ¨κ°λ³΄λ€ μμ λ : μ¦, μ€ν¬λ‘€μ΄ λ΄λ €κ°μ λ
fixed-nav
λΌλ ν΄λμ€λ₯Ό μΆκ°ν΄μ€λ€.
μλκ²½μ°μ fixed-nav μμ
λ‘κ³ μ κ²½μ° κΈ°μ‘΄μ logoλμ΄κ° 0μ΄λΌ fixedλμ λ λμ΄λ₯Ό μ‘°μ ν΄μ€λ€.