[Javascript]addEventListener, scroll 공부

작성목적

---

1. 공부한 내용을 적으면서 복습
2. 앞으로 배워 나가면서 조잡한 코드를 수정해 나가는 과정을 연습

---

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);

---

배운점

1. window.scrollY를 사용해서 위에서부터 몇px 스크롤 했는지 알아낼 수 있다.
2. scroll이라는 event로 스크롤바를 조작할 때마다 특정 코드를 조작할 수 있다.(addEventListener로 scrollY가 100px 됐을 때, fontSize를 변경되게 한다.)