Bootstrap 4 滚动页面时无法修改navbar导航栏颜色问题求助

问题原因 #

• 核心错误是jQuery选择器的id大小写和HTML实际id不匹配：HTML中导航栏的id属性为MainNavbar（首字母M大写），而你的JS代码中使用的选择器是$("#mainNavbar")（首字母m小写），DOM id属性区分大小写，导致jQuery无法选中目标导航栏元素，无法触发scrolled类的切换。
• 次要潜在问题：CSS中.navbar.scrolled选择器优先级可能低于Bootstrap的导航栏默认样式优先级，导致样式不生效。

修正方案 #

1. 修改JS代码中的选择器，和HTML的id保持一致：

$(function () {
    $(document).scroll(function () {
        // 把原来的#mainNavbar改成#MainNavbar
        var $nav = $("#MainNavbar");
        $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
    });
});

2. 可选优化：调整CSS选择器优先级，同时添加过渡效果让样式切换更顺滑：

/* 把原来的.navbar.scrolled改成#MainNavbar.scrolled，优先级更高 */
#MainNavbar.scrolled {
    background-color: red;
    transition: background-color 0.3s ease;
}

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