使用事件监听器和滚动位置更改汉堡菜单颜色

Question

我正在尝试更改汉堡栏线条的颜色。我使用了一个事件监听器，我尝试通过给跨度一个 class “跨度”来定位构成 burgermenu 行的跨度。正如你在这里看到的

 var distFromTop = document.querySelector(".om-mux").offsetTop;
 var distFromTop2 = document.querySelector(".galleri").offsetTop;
 var distFromTop3 = document.querySelector(".event-sektion").offsetTop;

 window.addEventListener("scroll", function() {
     var scroll = this.scrollY;
     if (scroll > distFromTop && scroll < distFromTop2) {
         document.querySelector(".span").style.backgroundColor = "black";
     } else if (scroll > distFromTop2 && scroll < distFromTop3) {
        document.querySelector(".span:before").style.backgroundColor = "white";
     } else if (scroll > distFromTop3){
        document.querySelector(".span").style.backgroundColor = "black";

     } else {
        document.querySelector(".span").style.backgroundColor = "white";

     }
 })`

代码运行良好，但问题是这只影响中间跨度，因为上行和下行的样式如下：

`  .menu-btn > span,
  .menu-btn > span::before,
  .menu-btn > span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    transition-duration: .25s;
  }`

如何定位 span:before 和 span:after？我可以这样做吗？ document.querySelector(".span:before").style.backgroundColor = "white";

Answer 1

参考：Changing CSS pseudo-element styles via JavaScript

最接近更改 JavaScript 中 pseudo-element 样式的方法是添加和删除 classes，然后将 pseudo-element 与 class 一起使用es。隐藏滚动条的例子：

CSS

.hidden-scrollbar::-webkit-scrollbar {
   visibility: hidden;
}

javascript

document.getElementById("editor").classList.add('hidden-scrollbar');

稍后要删除相同的 class，您可以使用：

document.getElementById("editor").classList.remove('hidden-scrollbar');

Answer 2

英语不是我的第一语言，所以请多多包涵。尝试在滚动时添加新的 class 以跨度并在 CSS 文件中提供 class background-color 属性。例子

而不是这个

document.querySelector(".span").style.backgroundColor = "black";

尝试

document.querySelector(".span").classList.add('black');

并将此 class css 属性添加到您的 css 文件中。

  .menu-btn > span.span.black::before{
    background-color: #000;
  }

使用事件监听器和滚动位置更改汉堡菜单颜色

Changing hamburger menu color with eventlistener and scroll position

javascript

css

event-listener