[javascript/jQuery] scroll하면 변하는 navigation 구현하기

로직

1. navbar의 시작 상태 CSS를 디자인한다.

2. on class가 붙었을 때 CSS를 디자인한다.

3. window.scrollY >0 일 때, on 클래스를 붙인다.

4. window.scrollY = 0 일 때, on 클래스를 뗀다.

 

javascript+css

.navbar{
    position:fixed;
    top:0;
    left:0;
    z-index:5;
    width: 100%;
    height: 80px;
    transition: all 1s ease;
}
.navbar.on{
    height: 50px;
    transition: all 1s ease;
}
.navbar-brand{
    font-size: 30px;
    transition: all 1s ease;
}
.navbar-brand.on{
    font-size: 24px;
    transition: all 1s ease;
}

let navLogo = document.querySelector('.navbar-brand');
let navBox = document.querySelector('.navbar');
            
window.addEventListener('scroll',function(){
	if(window.scrollY>0){
        navLogo.classList.add('on');
        navBox.classList.add('on');

	}else{
        navLogo.classList.remove('on');
        navBox.classList.remove('on');
    }
})

jQuery

$(window).on('scroll',function(){
    var scrollValue = $(document).scrollTop();
    console.log(scrollValue);
    if(scrollValue>0){
        $('.navbar').addClass('on');
        $('.navbar-brand').addClass('on');
    }else{
        $('.navbar').removeClass('on');
        $('.navbar-brand').removeClass('on');
    }
});