본문 바로가기
Js

hasClass를 이용한 이미지 체인지

by 영감은어디에 2024. 7. 17.
var $window = $(window),
    $header = $('.header'),
    $logo = 'img/logo.svg',
    $mlogo = 'img/mlogo.svg';

$window.scroll($.throttle(1000/15, function(){
    if ($(this).scrollTop() >= 100 ){
        if(!$header.hasClass('small')){
            $header.addClass('small');
            switchLogo($mlogo);
        }
    } else {
        if($header.hasClass('small')){
            $header.removeClass('small');
            switchLogo($logo);
        }
    }
}));

function switchLogo(newPath){
    var $logoimg = $('#logo');
    $logoimg.fadeOut(300, function(){
        $logoimg.attr('src', newPath);
        $logoimg.fadeIn(300);
    });
}

'Js' 카테고리의 다른 글

Lottie json 파일 단순 마우스 오버 효과  (0) 2024.10.17
replace(), 유튜브 클릭시 오토플레이  (0) 2024.07.17
숫자 카운터  (0) 2024.07.17
throttle(), clone()  (0) 2024.07.17
lottieFiles  (0) 2024.07.15
Lottie.js, scroll 연동  (0) 2024.07.15
swiper.on('slideChange'), letters  (1) 2024.07.14
gsap, draggable, photoswipe  (0) 2024.07.10