Bootstrap Navbar - 滚动后的品牌变化

Question

我只是Bootstrap和Web Developing的新手,所以我的问题对于专家来说可能非常简单和有趣.滚动后如何在Bootstrap中更改Navbar-Brand Image？我有这个完美的工作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");
    }   
});

但我无法理解滚动后我的品牌形象会如何变化？泰!

Answer 1

操作简单,只需改变src的image基础上,滚动条件

$(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这里默认class name为锚标签,其中包含img标签.$('.navbar-brand img')获取元素img内部的标记.nav-brand.