본문 바로가기

프론트엔드 공부/라이브러리&프레임워크

jquery 상단 네비 축소하기

** 제이쿼리 css속성 적용

여러가지 속성적용시 대괄호로 묶어주고 쉼표대신 세미콜론 사용 ! 

AAA.css('속성',값);

BBB.css({'속성:값','속성:값'})

$(function(){
  //window scroll시 네비 축소
  
  $(window).scroll(function(){
    let mainHeader = $('#header'), //#header 높이변경
    defaultLogo = $('.header .first > h1'), //글자 사이즈변경
    navLetter = $('.header .topnav > a') //글자 line-height 변경
    
    wScroll = $(this).scrollTop();
    if(wScroll>100){
      if(!mainHeader.hasClass('shrink')){
        mainHeader.addClass('shrink');
        navLetter.css('line-height','80px');
        defaultLogo.css({'line-height':'80px',
        'font-size':'35px'});
      }
    }else{
      if(mainHeader.hasClass('shrink')){
        mainHeader.removeClass('shrink');
        navLetter.css('line-height','138px');
        defaultLogo.css({'line-height':'138px',
        'font-size':'50px'});      
      }
    }
  });
});