更改滚动Jquery上的徽标 [英] Change logo on scroll Jquery

问题描述

好吗?首先，我要感谢您的帮助.好吧，我的问题如下:

All right? First of all I want to thank the help. Well, my question is as follows:

我想滚动鼠标并创建背景，并从顶部开始减少空间，并更改徽标.顶部和底部的问题，然后我可以做为下面的代码.但是，我不知道该怎么做才能更改徽标.

I would like to to scroll the mouse and create a background and decrease the space from the top, also change the logo. The question of the top bottom and then I could do as code below. However, I do not know what to do to change the 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");
});

谢谢:)

推荐答案

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

So, first off, you have the same class added twice here - <a class="navbar-brand navbar-brand page-scroll" href="" title=""></a>

您可以执行以下操作以根据scrollTop

You may do the following to toggle a class based on the 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');
    }
});

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

P.S. Scroll triggers for every pixel scrolled and way too much scripts on scroll may choke your browser. Use it sparingly!

这篇关于更改滚动Jquery上的徽标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！