滾動后引導Navbar品牌變更

Question

我只是Bootstrap和Web開發的新手，所以我的問題對於專家來說可能非常簡單和有趣。 滾動后如何在Bootstrap中更改Navbar品牌圖像？ 我有這個完美的工作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

簡單，只需根據滾動條件更改image的src

$(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')獲取.nav-brand元素內的img標簽。