所以我得到了这个功能,当我向下滚动该站点时,它应该更改导航栏的背景颜色并使其固定,但是它不起作用。请告诉我,该函数是否存在问题,或者我在其他地方出错了?还尝试在html文件中添加功能,但仍然无法正常工作,并尝试了w3school的功能以使其正常工作。
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('siteNav.scroll');
} else {
$('nav').removeClass('siteNav.scroll');
}
})
#siteNav {
width: 100%;
top: 0;
left: 0;
transition: 0.3s;
display: flex;
flex-direction: row;
justify-content: center;
}
.siteNav.scroll {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
}
#siteNav .logo {
padding: 10px;
transition: 0.3s;
display: flex;
}
#siteNav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
#siteNav ul li {
list-style: none;
border-right: 1px solid #383838;
padding-top: 20px;
}
#siteNav ul li a {
padding: 0 30px;
text-decoration: none;
transition: 0.3s;
color: #000000;
}
#siteNav ul li:last-child {
border-right: none;
}
#siteNav.scroll ul li a {
color: #000000;
}
#siteNav ul li a:focus {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
<nav id="siteNav">
<img class="logo" src="images/img2-logo.png" alt="">
<ul>
<li><a href="#mission">MISSION</a></li>
<li><a href="#clients">CLIENTS</a></li>
<li><a href="#products">PRODUCTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
<!--header-->
<header>
<div>
<h1>aaaaaaa <br><a>aaaaaa-aaaaaa</a></br>
</h1>
</div>
</header>
</div>
答案 0 :(得分:1)
CSS选择器.siteNav.scroll
搜索具有类siteNav
和scroll
的元素,如下所示:
<nav class="siteNav scroll">
但是,您的.addClass("siteNav.scroll")
实际上是在添加一个叫做siteNav.scroll
的一个类,就像这样:
<nav class="siteNav.scroll">
.addClass("siteNav scroll")
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('siteNav scroll');
} else {
$('nav').removeClass('siteNav scroll');
}
})
body { height: 5000px; }
#siteNav {
width: 100%;
top: 0;
left: 0;
transition: 0.3s;
display: flex;
flex-direction: row;
justify-content: center;
}
.siteNav.scroll {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
}
#siteNav .logo {
padding: 10px;
transition: 0.3s;
display: flex;
}
#siteNav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
#siteNav ul li {
list-style: none;
border-right: 1px solid #383838;
padding-top: 20px;
}
#siteNav ul li a {
padding: 0 30px;
text-decoration: none;
transition: 0.3s;
color: #000000;
}
#siteNav ul li:last-child {
border-right: none;
}
#siteNav.scroll ul li a {
color: #000000;
}
#siteNav ul li a:focus {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
<nav id="siteNav">
<img class="logo" src="images/img2-logo.png" alt="">
<ul>
<li><a href="#mission">MISSION</a></li>
<li><a href="#clients">CLIENTS</a></li>
<li><a href="#products">PRODUCTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
<!--header-->
<header>
<div>
<h1>aaaaaaa <br><a>aaaaaa-aaaaaa</a></br>
</h1>
</div>
</header>
</div>
除非您将为此使用多种元素类型(siteNav
之外),否则我认为您不需要<nav>
类(正如Andy G指出的那样)。
相反,将其简化为.addClass("scroll")
/ .removeClass("scroll")
,然后将CSS选择器更改为nav.scroll { ... }
(或#siteNav.scroll { ... }
)。
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('scroll');
} else {
$('nav').removeClass('scroll');
}
})
body { height: 5000px; }
#siteNav {
width: 100%;
top: 0;
left: 0;
transition: 0.3s;
display: flex;
flex-direction: row;
justify-content: center;
}
nav.scroll {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
}
#siteNav .logo {
padding: 10px;
transition: 0.3s;
display: flex;
}
#siteNav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
#siteNav ul li {
list-style: none;
border-right: 1px solid #383838;
padding-top: 20px;
}
#siteNav ul li a {
padding: 0 30px;
text-decoration: none;
transition: 0.3s;
color: #000000;
}
#siteNav ul li:last-child {
border-right: none;
}
#siteNav.scroll ul li a {
color: #000000;
}
#siteNav ul li a:focus {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
<nav id="siteNav">
<img class="logo" src="images/img2-logo.png" alt="">
<ul>
<li><a href="#mission">MISSION</a></li>
<li><a href="#clients">CLIENTS</a></li>
<li><a href="#products">PRODUCTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
<!--header-->
<header>
<div>
<h1>aaaaaaa <br><a>aaaaaa-aaaaaa</a></br>
</h1>
</div>
</header>
</div>