javascript - 滚动到底部时如何更改导航栏的颜色?
问题描述
我有2个问题。 问题 1:滚动到底部时,我正在尝试更改导航栏背景颜色。我正在尝试添加该类,但它无法覆盖引导程序 !important 属性。但我已经使用这条线覆盖了它:
nav.scrolled {
background-color: #e8e4e1 !important;
box-shadow: 2px 10px 4px var(--section-bg-light);
}
问题2:如何在滚动到页面底部、页面页脚时使用javascript更改导航栏背景?
let navbar = document.querySelector('.navbar');
let section = document.querySelectorAll('section');
section.addEventListener('mouseover', addIt);
function addIt() {
navbar.classList.remove('bg-transparent');
navbar.classList.add('bg-dark');
}
nav.bg-dark {
background-color: #e8e4e1 !important;
}
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="./img/logo-min.png" alt="JN-Fashion-Zone"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item home">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</div>
</nav>
解决方案
请查看如何覆盖!重要? 您需要使用高特异性来覆盖 !important 规则。尝试向您的选择器添加更多级别。
推荐阅读
- shell - 在 shell 中执行但不能从 bash 脚本文件中工作时工作
- vega-lite - 如何在 vega-lite 堆叠条形图中控制组的顺序
- android - 在 Qt Creator (Windows) 中构建 Qt 库的问题
- react-native - 如何通过 ref 获取 textinput 的文本/值?
- windows - 我想复制现有的配置文件规则并将它们添加到新的配置文件中。可以使用“赎回.dll”吗?
- c++ - MSVC 2010 编译的应用程序和 MSVC 2019 编译的应用程序之间的行为差异
- jira - in jira server my burndown does not reflect my done work
- c - *(x+i) 等同于 &x[i]?
- python - fillna() 不替换 NaN 值
- microsoft-graph-api - 无法在逻辑应用调用图形 API 中设置 hideFromAddressLists