Question

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

我想滚动鼠标并创建背景并从顶部缩小空间，也可以更改徽标。顶部底部的问题，然后我可以做下面的代码。但是，我不知道如何更改徽标。

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

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

在滚动Jquery上更改徽标

1 个答案: