[project] web portfolio 구축 - JS navbar scroll & transparent

MDN: Window.scrollY

MDN: Determining the dimensions of elements

'use strict';

//make navbar transparent when it is on the top
const navbar = document.querySelector('#navbar');
const navbarHeight = navbar.getBoundingClientRect().height;
document.addEventListener('scroll', () => {
    // console.log(scrollY);
    // console.log(`navbarHeight: ${navbarHeight}`);
    if(window.scrollY > navbarHeight) {
        navbar.classList.add('navbar--dark');
    } else {
        navbar.classList.remove('navbar--dark');
    }
});

• querySelector()를 이용해 id=’navbar’를 지정하기
• getBoundingClientRect().height/.width를 이용해 client 화면에 보이는 실제 높이와 너비를 가져오기
• The addEventListener()  method of the [EventTarget](<https://developer.mozilla.org/en-US/docs/Web/API/EventTarget>) interface sets up a function that will be called whenever the specified event is delivered to the target.
• The Element.classList is a read-only property that returns a live [DOMTokenList](<https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList>) collection of the class attributes of the element. This can then be used to manipulate the class list. Using classList is a convenient alternative to accessing an element's list of classes as a space-delimited string via [element.className](<https://developer.mozilla.org/en-US/docs/Web/API/Element/className>).
• classList.add()를 통해 특정 조건 하에서 class 추가하기 → css에 class 추가하여 디자인 지정하기

#navbar {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    **background-color: transparent; // 기존 배경색에서 transparent로 변경(스크롤 후 js에 의해 변경)**
    align-items: center;
    color: var(--color-white);
    padding: 16px;
}

/* 스크롤 후 변경할 색상 지정, 애니메이션 효과 지정 */
#navbar.navbar--dark{
    background-color: var(--color-green);
    transition: background-color var(--animation-duration) ease-in-out;
}