How to add classes to nav when scrolling?

Question

JavaScript

How to make it so that when the user scrolls the page in nav, these classes are added:

.nav-scrolled{
  background-color: white;
}
.nav-scrolled-links{
  color: black;
}
.top_nums p a {
  opacity: 1;
}

I'm transferring the site to React and I used to do it through the JQuery library.

<nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
            <div className="container">
                  <a className="navbar-brand js-scroll-trigger" href="#page-top">
                  <h1 className="text-uppercase">

                  <div className="kingplace-logo">
                    <img src={Logo} alt=""/>
                          </div>
                  </h1>
                  </a>
                  <div className="top_nums">
                    <p className="text-black mb-4"><a href="tel:[phone]"> [phone]</a></p>
                    <p className="text-black mb-4"><a href="tel:[phone]"> [phone]</a></p>
                  </div>
                  <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                  <span className="navbar-toggler-icon"></span>
                  </button>

                  <div className="collapse navbar-collapse" id="navbarResponsive">

                  <ul className="navbar-nav ml-auto">
                  <li className="nav-item">
                  <a className="nav-link js-scroll-trigger" href="#okomp">О комплексе</a>
                  </li>
                  <li className="nav-item">
                  <a className="nav-link js-scroll-trigger" href="#preim">Преимущества</a>
                  </li>
                  <li className="nav-item">
                  <a className="nav-link js-scroll-trigger" href="#price">Цены</a>
                  </li>
                  <li className="nav-item">
                  <a className="nav-link js-scroll-trigger" href="#rassr">Рассрочка</a>
                  </li>
                  <li className="nav-item">
                  <a className="nav-link js-scroll-trigger" href="#plan">Планировки</a>
                  </li>
                  <li className="nav-item">
                  <a className="nav-link js-scroll-trigger" href="#contact">Контакты</a>
                  </li>
                  </ul>


                  </div>
            </div>
        </nav>

Complete project.
https://github.com/fpsstyle228/manchetten

Answer 1

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
},

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
},

handleScroll=(event)=> {
   var hiddenInput = document.createElement("mainNav");
    hiddenInput.setAttribute("className", "nav-scrolled nav-scrolled-links top_nums");
},