Question

可以请别人帮帮我吗？我的网页是：http://etinklapis.lt/

此处。滚动后的.header-line有一个额外的.header-line .active类但css无法看到它并且不会更改背景颜色。你可以看到我的css和那里.header-line .active是background-color属性。为什么我的背景仍然透明？

CSS：

.header-line {
  width: 100%;
  height: 60px;
  background-color: rgba(255,255,255,0.00);
}
.header-line .active {
  background-color: white;
}

头：

<div class="header-line">header</div>

使用Javascript：

$(function() {
  $(window).on("scroll", function() {
    if($(window).scrollTop() > 50) {
      $(".header-line").addClass("active");
    } else {
      //remove the background property so it comes transparent again (defined in your css)
      $(".header-line").removeClass("active");
    }
  });
});

Answer 1

这是因为在您的css文件中，您有.header-line .active { ... }，这意味着.active类.header-line内的课程。

您应该将其更改为.headerline.active { ... }（删除空格）

Answer 2

在bootstarp.css

中声明这样的css

.header-line.active {
background-color: white;
}

在javascript addclass之后它添加了类但css属性不起作用

2 个答案: