jQuery change brand logo in nav bar

$(document).scroll(function(){
    var scroll = $(this).scrollTop();

    if(scroll>$(window).height()){
        $('.navbar-brand').addClass('navbar-brand-scroll');
    }
    else {
        $('.navbar-brand').removeClass('navbar-brand-scroll');
    }
})
.navbar-brand {
    content: url("/KIDMIA/static/img/home/logo_white.png");
    width: 160px;
    height: 46px;
    padding: 0px;
}

.navbar-brand.navbar-brand-scroll {
    content: url("/KIDMIA/static/img/home/logo_gray.png");
    width: 160px;
    height: 46px;
    padding: 0px;
}
<div class=" navbar-brand"></div>

1

좌측 상단에 있는 brand logo는 scroll 위치가 main page를 넘어 설 때 다른 색 image로 바뀌게 된다. 결과는 다음과 같다. main page의 image 크기를 window의 크기와 같이 지정하였으므로, if문의 조건은 위와 같다.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s