16_shrink / attr / swtch

/*html body아래에 script가 있으므로 body읽고 script가 읽히기때문에
document할일 안해도 왼다.
바로 변수명 잡는다.*/

var $window = $(window),
$mainHeader = $('#main-header'),
$defaultLogo = 'images/logo.svg',
$smallLogo = 'images/logo-shrink.svg';

/*--> shrink클래스명을 가지고 있지않으면 넣어주고, 가지고 있으면 빼줘라.
shrink를 넣다뺐다할거다--->그 후 shrink를 css에서 작성*/
$window.scroll(function(){
if(($window).scrollTop() > 100){
 if(!$mainHeader.hasClass('shrink')){
 $mainHeader.addClass('shrink');
switchImages($smallLogo); //스몰로고를 보여줘
 
}
}else {
 if($mainHeader.hasClass('shrink')){
$mainHeader.removeClass('shrink');
  switchImage('$defaultLogo');
}
}
});
//switchImages 함수
function switchImages(newPath){
var $logo = $('#logo'); //사라지게하고 새로운패스로 넣어주는 아이를 보여준다.
$logo.fadeOut(300, function(){
//vac c = A.attr('src');  
//A.attr('src', 'c');  -->A의 속성 src를 c로 바꿔라
//<img src="images/logo.svg"의 속성을 logoshrink.svg로 바꾸고 다시 부활

$logo.attr('src', newPath); //fadeOut걸어놔서 아직 안보인다.
$logo.fadeIn(300);

}); //jquery fadeOut -->구글검색
}