使用页面滚动更改页眉背景时出现问题
使用页面滚动更改页眉背景时出现问题
提问于 2019-06-11 19:14:48
我正在实现一个固定的透明标题，当页面滚动超过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是固定的，透明的。然而，当我向下滚动时，它并没有变成黑色(尽管在检查器中似乎添加了标题滚动)。我似乎找不到任何解决问题的方法(提供的其他类似问题的建议都不起作用)……也许我错过了什么？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56542481
复制相关文章
相似问题