** 제이쿼리 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'});
}
}
});
});
'프론트엔드 공부 > 라이브러리&프레임워크' 카테고리의 다른 글
제이쿼리 backtotop 버튼 만들기 (0) | 2021.05.09 |
---|---|
jquery 부모자식형제요소 선택자 정리 (0) | 2021.05.06 |
jquery 스크롤시 네비바 변형 (0) | 2021.05.06 |
jquery $(document).ready(); (0) | 2021.05.05 |
skrolljs로 가로스크롤 만들기 (0) | 2021.05.05 |