javascript - 导航栏在滚动 Bootstrap 4 上更改颜色

Question

大家好，我希望我的导航栏能够在用户滚动时将颜色从透明切换为黑色，现在这段代码在我的 bootstrap 3 网站上有效，但是当我更改为 bootstrap 4 时，它不适用于一些原因

html:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav" role="navigation">
...
  </nav>

CSS:这只是让它变得透明

.bg-dark {
      background-color: rgba(255, 0, 0, 0)!important;
      padding-top: 20px;
}

javascript:

       $(document).ready(function(){

     var checkScrollBar = function(){
       $('.bg-dark').css({
         backgroundColor: $(this).scrollTop() > 1 ?
           'rgb(0, 0, 0)' : 'transparent'
       })
     }
     $(window).on('load resize scroll', checkScrollBar)
     });

同样，这在我的其他网站上工作，但在这个网站上，由于某种原因我似乎无法让它工作，

谢谢

Answer 1

我通过删除 CSS 中的 !important 规则来实现它。有了这条规则，jQuery 将内联更改背景颜色，但浏览器会选择 !important 样式来覆盖更改，因此它不会在视觉上反射(reflect)出来。

这一整行可能是不必要的，因为您正在使用 jQuery 将背景颜色设置为透明:

background-color: rgba(255, 0, 0, 0)!important;