0
我正在導航欄上工作。當我向下滾動時，我希望它變得更薄。我有代碼工作，但我無法得到應用的樣式..開發工具說，他們正在申請，但他們不是。所以對於jquery或者只是香草js，我怎麼能一次應用這些設置。這裏是如何 「應該」 工作的屏幕截圖：如何將這幾個CSS設置應用於jQuery？
由於某種原因，我不能在這裏張貼的CSS，所以在這裏is a link to codepen。
$(document).ready(function() {
// all custom jQuery will go here
var nav = $(".main-nav");
$(window).scroll(function(){
if($(this).scrollTop() > 5){
nav.addClass("main-nav-scrolled");
}else{
nav.removeClass("main-nav-scrolled");
}
});
});.fixed-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
width: 100%;
height: 110px;
background-color: #fff;
border-bottom: solid 1px #f2f2f2; }
.fixed-nav li,
.fixed-nav a {
height: 110px;
line-height: 110px; }
.fixed-nav {
height: 50px; }
.fixed-nav li,
.fixed-nav a {
height: 50px;
line-height: 50px; }
.menu {
width: 90%;
max-width: 980px;
margin: 0 auto; }
.menu a {
color: #333;
text-transform: uppercase; }
.menu a:visited {
color: #333; }
.menu a:hover, .menu a:target {
color: #ED1C24;
transition: color 0.4s; }
.menu-items {
display: inline-block; }
.sitename {
display: inline-block;
margin-right: 30px; }
a.sitename, a:visited.sitename {
color: #e0e0e0; }
.menu-items li {
display: inline-block;
margin-right: 10px;
margin-left: 10px; }
.menu-items a {
text-decoration: none; }
.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2; }
.show {
background-image: url(assets/down-arrow-icon.png); }
.hide {
background-image: url(assets/up-arrow-icon.png); }
@media only screen and (max-width: 800px) {
.menu {
position: relative;
width: 100%; }
.sitename {
position: absolute;
top: 0;
left: 15px;
margin-left: 0px; }
.menu-items {
display: none;
width: 100%;
margin-top: 50px;
background-color: #fff; }
.menu-items li {
display: block;
text-align: center; }
.show, .hide {
position: absolute;
top: 0;
right: 15px; }
.show {
display: inline-block; }
.hide {
display: none; }
#menu:target .show {
display: none; }
#menu:target .hide, #menu:target .menu-items {
display: inline-block; } }
@media only screen and (max-width: 220px) {
.sitename, .show, .hide {
font-size: 14px; } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<div class="container">
<div class="row">
<div class="twelve columns main-nav fixed-nav">
<div class="menu" id="menu"><a class="sitename" href="#">Brand-Logo</a> <a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Empty</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
您沒有在任何位置定義樣式'main-nav-scrolled'。 –