我想在我的网页上添加一个粘性横幅，但我遇到了一些问题。我想我知道问题出在哪里，但我不知道如何解决它。
这是粘性横幅的 JQuery 代码:
$(window).scroll(function() {
if( $(this).scrollTop() > 175 ) {
nav ul.addClass("main-nav-scrolled");
}
else {
nav ul.removeClass("main-nav-scrolled");
}
});
这是我的导航菜单使用的 CSS 编码:
.nav ul {
list-style: none;
background-color: #10bbb6;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 30px;
height: 30px;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #088783;
}
.nav a.active {
background-color: #fff;
color: #088783;
cursor: default;
font-weight: bold;
}
.nav li {
width: 110px;
border-bottom: none;
height: 40px;
line-height: 40px;
font-size: 1.2em;
}
.nav li {
display: inline-block;
margin-right: -4px;
}
我对 JQuery 概念完全陌生，我已经做了很多研究，但没有什么可以解决我的问题。 我认为在 je Jquery 编码中，“nav ul”未被识别。
nav ul.addClass("main-nav-scrolled");
我也试过
nav.addClass("main-nav-scrolled");
但这也没有用。
其他重要的 CSS 标签是:
.main-nav-scrolled {position: fixed;
top:0;}
#top { position: fixed;
top:0;
z-index: -1;
width: 100%
}
#bottom {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #10bbb6;
overflow: scroll;
}
#bottom,
#top { position: relative; }
这是它在 body 中的放置方式:
<body class="news">
<div id="top">
<a href="Homepage.html"><IMG STYLE="position:absolute; TOP:10px; LEFT:125px; WIDTH:150px; HEIGHT:150px" SRC="afbeeldingen/kledingbank2.jpg"></a>
<div class="banner"> Kledingbank Zaltbommel, voor iedereen. </div>
</div>
<header>
<div class="nav">
<ul>
<li class="Home"><a href="Homepage.html">Homepage</a></li>
<li class="Home"><a href="Over ons.html">Over ons</a></li>
<li class="tutorials"><a href="Sponsoren.html">Sponsoren</a></li>
<li class="about"><a href="Kleding.html">Kleding</a></li>
<li class="about"><a href="Vacaturen.html">Vacaturen</a></li>
<li class="news"><a class="active" href="Contact.html">Contact</a></li>
</ul>
</div>
</header>
<div id="bottom">
<BR>
<div class="link">
<center><p> Er is nog steeds veel vraag naar vrijwilligers! Heeft u interesse in het zijn van vrijwilliger bij de kledingbank, aarzel dan niet.
Stuur een mail naar <a href="mailto:KledingbankZaltbommel@gmail.com"> Kledingbank Zaltbommel</a> en wij nemen verder contact met u op! </center></p>
</div>
最佳答案
如其他答案中所述，您的 jQuery 首先没有定义为引用的元素。因此，nav ul.addClass()什么都不做，因为没有创建 jQuery 对象来匹配该引用。
进一步查看您的标记，我会引用 header元素添加粘性类而不是无序列表，因为 header是菜单的父级。
因此，您将拥有此脚本(最好在结束 </body> 标记之前):
<script type="text/javascript>
$(window).scroll(function() {
var nav = $('header');
if( $(this).scrollTop() > 175 ) {
nav.addClass("main-nav-scrolled");
}
else {
nav.removeClass("main-nav-scrolled");
}
});
</script>
关于javascript - 粘性横幅不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35294726/