我可以通过 jquery 编辑“类 id”的继承属性吗？答案

【问题标题】：Can I edit the inherited properties of an "Class id" via jquery?我可以通过 jquery 编辑“类 id”的继承属性吗？
【发布时间】：2021-03-18 08:07:02
【问题描述】：

我有一个在 Bootstrap 上运行的网站。

我的标题包含一个容器。此外，当我滚动页面时，#header.header-scrolled 被添加为类。这是我想要的。但是，我希望透明度功能在两种情况下都相同。由于容器在我滑动时是 Header 的一个功能，因此它不会使用 removeClass 函数删除。因此，在容器所在的部分使用了两次背景滤镜。

  header {
  transition: all 0.5s;
  z-index: 997;
  transition: all 0.5s;
  top: 20px;
}

#header .header-container {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.8);

}

#header.header-scrolled {
  top: 0;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.8);
}

我无法删除此函数中的 .header-container。

  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('#header').addClass('header-scrolled');
    } else {
      $('#header').removeClass('header-scrolled');
    }
  });

我也将其用作 HTML：

 <header id="header" class="fixed-top d-flex align-items-center">
    <div class="container">
    <div class="header-container d-flex align-items-center">

结果，当页面滚动时，容器部分变成了两层。

Backdrop-filter applied twice due to the feature inherited to the header.

【问题讨论】：

标签： javascript jquery css class

【解决方案1】：

尝试使用 CSS 直接管理这种情况...通过添加 :not() 伪类。

#header:not(.header-scrolled) .header-container {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.8);
}

【讨论】：