<nav id="navbar-main" class="navbar navbar-default navbar-static-top main-nav" data-spy="affix" data-offset-top="100">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img id="#head-logo" src="images/logo.png"></a>
</div>
从顶部滚动时上面的导航栏会发生变化并添加一个类 - "affix" ，当导航栏具有 "affix" 类时，我想更改 navbar-brand 中图像的来源。但以下不起作用 -
$(document).ready(function() {
if ($("#navbar-main").hasClass('affix')) {
$(".navbar-brand img").attr('src','second.jpg');
}
else {
$(".navbar-brand img").attr('src','images/logo.png');
}
});
以下作品——
$(window).scroll(function (){
var navscroll = $(window).scrollTop();
if(navscroll >= 50) {
$(".navbar-brand img").attr('src','second.jpg');
}
else {
$(".navbar-brand img").attr('src','images/logo.png');
}
});
如果在滚动时添加/删除类，则需要将代码放入scroll回调中并在添加/删除类后运行它（如果您基于类进行更改）。ready仅在页面加载和解析时运行一次。
例如，您可以这样做：
function updateLogo() {
if ($("#navbar-main").hasClass('affix')) {
$(".navbar-brand img").attr('src','second.jpg');
}
else {
$(".navbar-brand img").attr('src','images/logo.png');
}
}
$(updateLogo);
$(window).on("scroll", updateLogo);
...但前提是您知道执行类更新的代码已经注册了它的scroll处理程序（因为处理程序是按顺序执行的，所以如果它在上面的代码运行之前已经注册了它，那么你的将在之后注册）。如果你不知道，你需要做一些事情来确保你updateLogo在课程更新后打电话。
从你的评论：
我不想使用滚动使其工作，但是当班级发生变化时......
没有“班级变化”事件。您必须确定导致类更改的原因，然后触发任何原因。或投票（blech）。:-)
或者做一些理性的事情并使用 CSS 而不是为自己做更多的工作。:-)
img.affixed {
display: none;
}
.affix img.normal {
display: none;
}
.affix img.affixed {
display: inline;
}
...哪里img class="normal"是images/logo.png形象，img class="affixed"是second.jpg形象。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句