粘性导航栏在粘性后变化 CSS
Sticky Navbar changes CSS after being sticky
我知道这些粘性导航栏问题经常被问到,但我还找不到解决问题的办法。
我希望位于页面最顶部的导航栏在滚动 700 像素后返回并修复。这一直有效到现在。但问题是,我需要在导航栏(颜色和背景颜色)修复后更改 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;}
我的问题是我需要在滚动后将颜色更改为黑色并将背景更改为灰色。
感谢您的帮助。
您是否尝试过将 css 样式添加到 "navbar-fixed-top" class?如果是但没有工作,请提供工作 fiddle。再见
试试这个: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 添加了另一个 class .navup,其中包含您提到的 background-color
/ color
选项。
我知道这些粘性导航栏问题经常被问到,但我还找不到解决问题的办法。
我希望位于页面最顶部的导航栏在滚动 700 像素后返回并修复。这一直有效到现在。但问题是,我需要在导航栏(颜色和背景颜色)修复后更改 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;}
我的问题是我需要在滚动后将颜色更改为黑色并将背景更改为灰色。
感谢您的帮助。
您是否尝试过将 css 样式添加到 "navbar-fixed-top" class?如果是但没有工作,请提供工作 fiddle。再见
试试这个: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 添加了另一个 class .navup,其中包含您提到的 background-color
/ color
选项。