Bootstrap 滚动后导航栏品牌变化

Question

我只是 Bootstrap 和 Web 开发的新手，所以我的问题对于专家来说可能非常简单有趣。滚动后如何更改 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

很简单，根据滚动条件改变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 标签。

Bootstrap 滚动后导航栏品牌变化

Bootstrap Navbar-Brand change after scroll

javascript

navbar

twitter-bootstrap