Javascript 带窗口滚动变量的Flikering导航栏

我正在尝试更改滚动条上的导航栏背景，但不幸的是，它无法正常工作。一旦我向下滚动，背景开始闪烁，有时甚至在满足条件的情况下也会出现和消失。 它似乎无法正确读取

窗口。scorly

条件

有人能帮我吗

我的导航栏：

import * as React from "react";
import { Link } from "react-router-dom";

import { RiMenu3Fill } from "react-icons/ri";

class Navbar extends React.Component {
  state = {
    isOpen: false,
    bgColor: false,
  };

  navToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  navBg = () => {
    console.log(window.scrollY);
    if (window.scrollY >= 100) {
      this.setState({ bgColor: !this.state.bgColor });
    } else {
      this.setState({ bgColor: this.state.bgColor });
    }
  };

  componentDidMount() {
    window.addEventListener("scroll", this.navBg);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.navBg);
  }

  render() {
    return (
      <nav className={this.state.bgColor ? "navbar active" : "navbar"}>
        /*NAVBAR STUFFS*/
      </nav>
    );
  }
}

export default Navbar;

.navbar {
  /* position: absolute; */
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  line-height: 60px;
  white-space: nowrap;
  z-index: 1;
  background: transparent;
}

.navbar.active {
  background: blue;
  transition: var(--mainTransition);
}