O
O
Oleksandr Tatarinov2018-12-29 11:12:35
JavaScript
Oleksandr Tatarinov, 2018-12-29 11:12:35

How to add classes to nav when scrolling?

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:+380503921260"> +38 (098) 211 98 58</a></p>
                    <p className="text-black mb-4"><a href="tel:+380634868240"> +38 (066) 562 11 51</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 the question

In order to leave comments, you need to log in

1 answer(s)
R
Roman Alexandrovich, 2018-12-29
@RomReed

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");
},

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question