Question

大家好，所以我希望我的导航栏能够在用户滚动时立即将颜色从透明切换为黑色，现在此代码在我的bootstrap 3网站上运行，但是当我更改为bootstrap 4时，它没有做到这一点因某种原因工作

HTML：

property

CSS：这只是让它变得透明

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

javascript：

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

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

谢谢

Answer 1

我通过删除CSS中的Iterable规则来实现此目的。根据该规则，jQuery 将更改内联的背景颜色，但浏览器将在更改中选择!important样式，因此不会在视觉上反映出来。

这整行可能是不必要的，因为你使用jQuery将背景颜色设置为透明：

!important

Answer 2

仅使用Javascript：

<!-- Custom JS for background color on scrolling -->
<script>
    $(window).scroll(function(){
    var scroll = $(window).scrollTop();
    if(scroll < 300){
        $('.fixed-top').css('background', 'transparent');
    } else{
        $('.fixed-top').css('background', 'rgba(0, 0, 0, 0.4)');
    }
});
</script>

Navbar在滚动引导程序4上更改颜色

2 个答案: