gpt4 book ai didi

javascript - Bootstrap Navbar-滚动后品牌变化

转载 作者:行者123 更新时间:2023-12-02 14:48:28 24 4
gpt4 key购买 nike

我只是 Bootstrap 和 Web 开发的新手,所以我的问题对于专家来说可能非常简单和有趣。滚动后如何更改 Bootstrap 中的导航栏品牌图像?我有这个完美的工作 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");
}
});

但我不明白滚动后我的品牌形象如何改变?泰!

最佳答案

简单,根据滚动情况改变imagesrc即可

$(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 赋予 anchor 标记,其中包含 img 标记。 $('.navbar-brand img') 获取 .nav-brand 元素内的 img 标签。

关于javascript - Bootstrap Navbar-滚动后品牌变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37024099/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com