在用户向下滚动后,我试图将导航栏的颜色从透明更改为黑色。但是,我的JavaScript似乎无法正常工作,因为没有任何反应。我看过几个视频和类似的问题,但都没有效果
HTML
<nav role='navigation' class="sticky-top bg-transparent">
<img class="navbar-brand" src="../static/website_Images/logo.jpg" alt="Logo" style="height:90px;">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="/"><li>Home</li></a>
<a href="/image_submit"><li>Submit Image</li></a>
<a href="/image_search"><li>Search Image</li></a>
<a href="/login"><li>Login/Sign up</li></a>
</ul>
</div>
</nav>
JS
<script >
$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop() > 100);
});
</script>
CSS
.bg-transparent{
height: 90px;
}
.bg-transparent.scrolled{
background: black !important;
}
答案 0 :(得分:0)
您的JavaScript代码不正确。
使用此代码进行测试:
window.onscroll = function () { scrollHeaderHandler() };
function scrollHeaderHandler() {
if (window.pageYOffset > 100) {
$('nav').addClass('scrolled');
} else {
$('nav').removeClass('scrolled');
}
}