引导 5 >在较小的设备上展开时更改导航栏的样式

Question

第一次在这里发问题，所以请友好:)

我添加了下面的脚本来改变导航栏滚动时的css。

window.addEventListener("scroll", function () {
let header = document.querySelector(".navbar");
let windowPosition = window.scrollY > 0;
header.classList.toggle("change-bg-nav", windowPosition);});

这是类 的CSS

.change-bg-nav {
box-shadow: var(--box-shadow);
background-color: rgb(255, 255, 255, 0.9) !important;
backdrop-filter: blur(5.5px);}

效果很好，当我在任何设备尺寸上滚动时，导航条的css都会按预期变化。现在，当我在一个较小的设备上点击汉堡包图标展开菜单时，我希望达到同样的效果，但不需要滚动。我试过媒体查询，但这并没有给我想要的结果。对于如何处理这个问题有什么建议吗?

nav

的代码

<nav class="navbar navbar-expand-lg navbar-light bg-light px-3 mb-5">
<div class="container-fluid">
<a class="navbar-brand" href="/">Brand name</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto">
<a class="nav-link active" aria-current="page" href="/">Home</a>
<a class="nav-link" href="/about.html">About</a>
<a class="nav-link" href="/about.html#contact-me">Contact</a>
</div>
<div class="navbar-nav social-media">
<a href="#" target="_blank" class="nav-link social"><i class="fab fa-twitter px-1"></i></a>
<a href="#" target="_blank" class="nav-link social"><i class="fab fa-linkedin-in px-1"></i
></a>
</div>
</div>
</div>
</nav>

Answer 1

钩入导航栏折叠事件来切换change-bg-nav类…

let header = document.querySelector(".navbar");
header.addEventListener('show.bs.collapse', function () {
header.classList.toggle("change-bg-nav");
})
header.addEventListener('hide.bs.collapse', function () {
header.classList.toggle("change-bg-nav");
})

https://codeply.com/p/7AXPT20HSL

Answer 2

对于移动设备，我认为你应该使用另一种策略。ie .

if(hamburger.clicked) {
// add bg navber color.
}