javascript - 在滚动 Jquery 上更改 Logo

Question

还好吗？首先我要感谢帮助。那么，我的问题如下:

我想滚动鼠标并创建背景并减少顶部的空间，同时更改 Logo 。顶部底部的问题然后我可以按照下面的代码来做。但是，我不知道如何更改 Logo 。

HTML:

<div class="col-md-12">
        <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <!-- copy into bootstrap -->
                    <span class="bar1"></span>
                    <span class="bar2"></span>
                    <span class="bar3"></span>
                    <span class="bar4"></span>
                    <!-- end of code for bootstrap -->
                </button>
            <h1 class="navbar-brand-spacing">
                <a class="navbar-brand navbar-brand page-scroll" href="" title=""></a>
            </h1>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
        </div>
    </div>

CSS:

.navbar-brand {
    text-transform: none;
    margin: 0px;
    min-width: 214px;
    text-indent: -9999px;
    height: 70px;
    background: url(../images/logo-telbox.png) no-repeat;
}
.navbar-brand-scroll {
    background: url(../images/logo-telbox-scroll.png) no-repeat;
}

JS:

$(window).scroll(function () {
    var e = $(this).scrollTop();
    e > 60 ? $("header").css("background", "#16181F").css("padding", "0px 0px 10px") : $("header").css("background", "transparent").css("padding", "20px 0px 20px");
});

谢谢:)

Answer 1

所以，首先，您在此处添加了两次相同的类 - <a class="navbar-brand navbar-brand page-scroll" href="" title=""></a>

您可以执行以下操作来切换基于 scrollTop 的类

.navbar-brand {
    text-transform: none;
    margin: 0px;
    min-width: 214px;
    text-indent: -9999px;
    height: 70px;
    background: url(../images/logo-telbox.png) no-repeat;
}
.navbar-brand.navbar-brand-scroll {
    background: url(../images/logo-telbox-scroll.png) no-repeat;
}

var $header = $("header");
var $logo = $("h1.navbar-brand-spacing > a");
$(window).scroll(function () {
    var e = $(this).scrollTop();
    if (e > 60) {
        $header.css("background", "#16181F").css("padding", "0px 0px 10px");
        $logo.addClass('navbar-brand-scroll');
    } else {
        $header.css("background", "transparent").css("padding", "20px 0px 20px");
        $logo.removeClass('navbar-brand-scroll');
    }
});

附言滚动每个像素的滚动触发器，滚动上过多的脚本可能会阻塞您的浏览器。请谨慎使用!