코맛

ㅁ금일 학습내용:

'user strict';

// Make navbar
const navbar = document.querySelector('#navbar');
const navbarHeight = navbar.getBoundingClientRect().height;
const navbarLogo = document.querySelector('.navbar__logo');
const navbarA = document.querySelector('.problem');
console.log(`높이: ${navbarHeight}`);
console.log(navbarA);


document.addEventListener('scroll', function () {

    // 1.스크롤 시 작동할 클래스를 추가함.
    
    if(window.scrollY > navbarHeight) {
        
        navbar.classList.add('navbar--dark');
        navbarLogo.classList.add('navbar--dark2');
        
        
    } else {
        navbar.classList.remove('navbar--dark');
        navbarLogo.classList.remove('navbar--dark2');
    }

})

ㅁ getBoundingClientRect

element의 크기 및 좌표 등을 반환한다.

x , y, width, height , top, right , bottom, left  

ㅁwindow.scrollY

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

ㅁquerySelectAll

CSS에 존재하는 selector를 한 가지 또는 여러 개를 선택하여 Nodelist를 반환한다.

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll