1
我的问题是如何在页面滚动时更改徽标。我已经研究了堆栈溢出并找不到解决方案。没有任何代码带来错误,我无法让他们工作。滚动更改徽标引导3
下面是我想要解决的问题,我的网站的HTML,CSS和JavaScript的代码。我的HTML如下:
<body id="page-top">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top"><div class="pull-left"><img class="top-logo" src="img/jtorbiklogo1.png"></a></div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right navbar-custom">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#web">Web Design</a>
</li>
<li>
<a class="page-scroll" href="#graphic">Graphic Design</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
此代码的CSS是boostrap.min.css和我自己的自定义CSS:
@media (min-width: 992px) {
.top-logo {
width: 600px;
height: 100%;
max-height:132px;
min-height:132px;
margin-top: -58px;
margin-left: -180px;
}
这是在我的992px宽的原因是,我只希望这种情况发生对于超过992的任何设备。我也有不同的标志大小页面缩小。一旦页面滚动,我想添加JavaScript来更改导航栏中的徽标。我发现了一个JavaScript代码,我认为它会起作用,但需要进行调整。
$(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')
}
});
它在我看来像你的代码工作。看看这个。 [CodePen演示](https://codepen.io/dankreiger5/pen/QMvVVa) –
我看到它在copdepen上工作,但是当我尝试实现到我的网站navbar时,它不响应。那是我被卡住了。我尝试了一切。也许你可以看看它。 @DanKreiger –
如果它只与您提供的代码一起工作,但不在您的网站上,那么可能会有更多代码导致问题。我的第一个猜测会是额外的CSS,它会覆盖你在这里提供的内容。 检查浏览器中的检查器,看看是否所有的CSS都被应用了,并确保它没有被覆盖。 –