Question

我知道这些粘性导航栏问题经常被问到，但我还无法找到问题的解决方案。

我希望导航栏位于页面顶部，在滚动700px后返回并修复。这一直有效。但问题是，我需要在修复后更改导航栏的css（颜色和背景颜色）。

这是我的代码：Html（我正在使用bootstrap）：

<nav class="navbar navbar-sm">

    <div class="collapse navbar-collapse container-fluid" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
             <li><a href="javascript:void(0)">Fotos</a></li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Projects<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0)">Project1</a></li>
                    <li><a href="javascript:void(0)">Project2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

我的JavaScript是：

$(window).bind('scroll', function() {
var navHeight = 700; 

($(window).scrollTop() > navHeight) ? 
    $('nav').addClass('navbar-fixed-top') :
    $('nav').removeClass('navbar-fixed-top');});

我的CSS是：

.caret {
color: white;}

.navbar ul li a{
color: white;}

我的问题是我需要在滚动后将颜色更改为黑色并将背景变为灰色。

感谢您的帮助。

Answer 1

您是否曾尝试将css样式添加到＆＃34; navbar-fixed-top＆＃34;类？如果是，不起作用，请提供工作小提琴。再见。

Answer 2

试试这个：https://jsfiddle.net/0z3ck7Lg/

<强> JS / jQuery的：

$(window).bind('scroll', function() {
var navHeight = 700; 

($(window).scrollTop() > navHeight) ? 
    $('nav').addClass('navbar-fixed-top navup') :
    $('nav').removeClass('navbar-fixed-top navup');});

<强> CSS：

body {
    height: 2000px;
    width: 100%;
}
.navup {
    background-color: grey;
}
.navup ul.nav > li > a {
    color: black;
}

我还在您的JS中添加了另一个类.navup，其中包含您提到的background-color / color选项。

Sticky Navbar粘贴后更改CSS

2 个答案: