작성목적
- 공부한 내용을 적으면서 복습
- 앞으로 배워 나가면서 조잡한 코드를 수정해 나가는 과정을 연습
html
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">wow</span>
<span class="badge bg-dark">Dark</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
css
.navbar {
position: fixed;
width: 100%;
z-index: 5;
}
.navbar-brand {
font-size: 30px;
}
javascript
const navLogo = document.querySelector(".navbar-brand");
function scrollMove() {
if (window.scrollY >= 100) {
navLogo.style.fontSize = "20px";
}else if (window.scrollY == 0) {
navLogo.style.fontSize = "30px";
}
}
window.addEventListener("scroll", scrollMove);
배운점
window.scrollY
를 사용해서 위에서부터 몇px 스크롤 했는지 알아낼 수 있다.
scroll
이라는 event
로 스크롤바를 조작할 때마다 특정 코드를 조작할 수 있다.(addEventListener
로 scrollY
가 100px
됐을 때, fontSize
를 변경되게 한다.)