Question

我的问题是如何在页面滚动时更改徽标。我已经对Stack Overflow进行过研究，但找不到解决方案。没有任何代码带来错误我无法让它们工作。

以下是我正在尝试修复的网站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')
}   
});

Answer 1

我想感谢@DanKreiger＆amp; @ katniss.everbean有帮助。我已经按照katniss给我的步骤开始工作了。问题是我的jquery链接在底部，这导致了一个定义问题导致脚本无法响应。我是Stack Overflow的新手。我不知道我能不能给分。我将标记为已解决，但再次感谢您的帮助！

更改滚动Bootstrap 3上的徽标

1 个答案: