Bootstrap 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 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

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

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