How to add class in element on scroll React js

Question

How to add class in element on scroll React js, I want to add class in on scroll and remove that class if on top of the page.

import React from "react"
import { Link } from "react-router"
import { prefixLink } from "gatsby-helpers"
import Helmet from "react-helmet"
import { config } from "config"

module.exports = React.createClass({
  propTypes() {
    return {
      children: React.PropTypes.any,
    }
  },
  render() {
  window.addEventListener('scroll', (event) => {

    });
    return (
      <div>
        <header className="header">
          <div className="top-bar">
            <span><a href="tel:6788272782">678-827-2782 </a></span>
            <span><a href="mailto:[email protected]"> [email protected]</a></span>
            <button>Login</button>
          </div>
        </header>
        {this.props.children}
      </div>
    )
  },

})

Answer 1

If you want to use React Hooks in 2020 stateless component

const [scroll, setScroll] = useState(false);
 useEffect(() => {
   window.addEventListener("scroll", () => {
     setScroll(window.scrollY > 50);
   });
 }, []);

and use it anywhere in your code

className={scroll ? "bg-black" : "bg-white"}

setScroll(window.scrollY > 50); here 50 specify the height.