헤더 상단에 내비게이션 바 스크롤 시에 배경 변화 주기

header 내비게이션 바 스크롤 내렸을때 특정 위치에서 클래스 넣어주는 스크립트

<script>
         $(function(){
            $(window).scroll(function(){
            var navbar = $(this).scrollTop();
            console.log(navbar);
            var $header = $('header');
            if(navbar > 860){
                $header.addClass('activated');
            }else{
                $header.removeClass('activated');
            }
          })
        })
    </script>

스크롤을 내릴경우 스크롤 값이 navbar 변수에 저장된다.

헤더 값은 header 변수에 저장된다.

navbar값이 860보다 클 경우

헤더에 activated라는 변수를 붙여준다.

아니면 변수를 제거 한다.

css 부분

header.activated{
  background-color:#589f7b;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}