更改卷轴上的徽标 Jquery

Question

好吗？首先我要感谢帮助。嗯，我的问题如下：

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

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

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

您可以根据 scrollTop

执行以下操作来切换 class

.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');
    }
});

P.S。滚动每个像素的滚动触发器，滚动上过多的脚本可能会阻塞您的浏览器。谨慎使用！

更改卷轴上的徽标 Jquery

Change logo on scroll Jquery

javascript

jquery

scroll

menu