我正在实现一个固定的透明标题,当页面滚动超过100像素时会变成黑色。
目前,在main.js中我有一个函数:
// Header scroll class
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.header').addClass('header-scrolled');
} else {
$('.header').removeClass('header-scrolled');
}
});
在main.css中,我有:
/*-------
# Header
---------*/
#header {
padding: 3px 0;
position: fixed;
left: 0;
top: 0;
right: 0;
transition: all 0.5s;
z-index: 997;
background-color: transparent;
}
.header-scrolled {
background-color: black;
}
并且html页面的格式如下:
<header id="header" id="home">
<div class="container">
<li class="row align-items-center justify-content-between d-flex">
<div id="logo">
<a href="home.html"><img width="160" height="160" src="{% static
'img/my_logo.png' %}" alt="" title="" /></a>
</div>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active"><a href="#home">{% trans "Home" %}</a>
</li>
<li class="menu-active"><a href="#contacts">{% trans "Contacts"
%}</a></li>
</ul>
</nav>
</li>
</div>
</header>
目前header是固定的,透明的。然而,当我向下滚动时,它并没有变成黑色(尽管在检查器中似乎添加了标题滚动)。我似乎找不到任何解决问题的方法(提供的其他类似问题的建议都不起作用)……也许我错过了什么?
https://stackoverflow.com/questions/56542481
复制相似问题