Bootstrap固定导航栏滚动切换背景色功能失效，求可行修复方案

前置依赖检查 #

你使用的是jQuery语法实现滚动监听，Bootstrap 5及更高版本默认不内置jQuery，需确保你已经在自定义JS代码之前正确引入jQuery依赖。

CSS代码调整 #

当前过渡规则仅配置在scrolled类下，导航栏回到顶部时不会有平滑过渡效果，调整为：

#mainNavbar {
    transition: background-color 500ms ease;
}
#mainNavbar.scrolled{
    background-color: #ac3bac;
}

JS代码优化 #

原代码滚动事件绑定对象、触发条件存在兼容问题，修正后如下：

$(function () {
    // 滚动事件绑定到window对象兼容性更强
    $(window).scroll(function () {
        const $nav = $("#mainNavbar");
        // 滚动距离超过10px就切换类，避免导航高度计算异常导致不触发
        $nav.toggleClass("scrolled", $(this).scrollTop() > 10);
    });
});

HTML冗余修复 #

导航栏切换按钮重复定义了class属性，会导致样式冲突，修正后代码：

<button class="navbar-toggler btn btn-info" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
    aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

内容的提问来源于stack exchange，提问作者PSB