Question

我一直在努力寻找一种方法来选择JS中的伪元素，以便在用户滚动时更改它的颜色。

更具体地说，我正在使用一个固定的导航栏，它可以在滚动时更改背景颜色和文本颜色。但是我需要在滚动时将伪选择器更改为不同的颜色。这就是我用于所有其他元素的东西（我知道它非常冗余，但是现在它只是原型，直到我掌握JS和DOM操作）。

$(document).ready(function() {
var removeColor = $('.navigation__item');
var posColor = removeColor.position();
$(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= posColor.top & windowpos >=1) {
        removeColor.insertRule('header__navigation--change');
    } else {
        removeColor.removeRemove('header__navigation--change');
    }
});
});

CSS：

nav.header__navigation a{
color:#fff;
font-size:1em;
text-decoration:none;
    text-transform: uppercase;
display:block;
padding: 0.6em 0;
letter-spacing: 0.08em;
@include for-desktop-up {
  color:#fff;
  font-size:0.7em;
  text-decoration:none;
  text-transform: uppercase;
  display:block;
  margin-top: 0.5em;
  line-height: 0;
  font-weight:300;
};
}
nav.header__navigation li::after {
    @include for-desktop-up {
      content: "";
      display: block;
      width: 0;
      height: 3px;
      background-color: #fff;
      transition: width .3s;
      margin-top: -15px;
    };
}
nav.header__navigation--change li::after {
    @include for-desktop-up {
      content: "";
      display: block;
      width: 0;
      height: 3px;
      background-color: #000;
      transition: width .3s;
      margin-top: -15px;
    };
}
nav.header__navigation a:hover{
        text-decoration: none;
}
nav.header__navigation li:hover::after{
    width: 100%;
}

感谢您的任何意见！

如何在向下滚动时更改伪装选择器的背景颜色

0 个答案: