I am just newbie at Bootstrap and Web Developing, so my question could be really simple and funny for experts. How can I change Navbar-Brand Image in Bootstrap after scrolling? I have this perfect working JS:

    $(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $('#custom-nav').addClass('affix');
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $('#custom-nav').removeClass('affix');
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }   
});

But I can't understand how my brand image can change after scrolling? Ty!

I am just newbie at Bootstrap and Web Developing, so my question could be really simple and funny for experts. How can I change Navbar-Brand Image in Bootstrap after scrolling? I have this perfect working JS:

    $(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $('#custom-nav').addClass('affix');
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $('#custom-nav').removeClass('affix');
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }   
});

But I can't understand how my brand image can change after scrolling? Ty!

• javascript
• twitter-bootstrap
• navbar

1 Answer 1

Simple, Just change the src of the image based on the scrolling condition

$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $('#custom-nav').addClass('affix');
        $(".navbar-fixed-top").addClass("top-nav-collapse");
        $('.navbar-brand img').attr('src','newImage.jpg'); //change src
    } else {
        $('#custom-nav').removeClass('affix');
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
        $('.navbar-brand img').attr('src','OldImage.jpg')
    }   
});

.nav-brand here is by default class name given to anchor tag which contains img tag inside it. $('.navbar-brand img') gets the img tag which is inside .nav-brand element.