React

by Spencer Smith

HTML

<div id="app"></div>

CSS

#app {
  height: 2000px;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      bgColor: 'red',
    }
  }

  componentDidMount() {
    window.addEventListener("scroll", this.listenScroll);
  }
  
  listenScroll = (event) => {
    if(event.target.scrollingElement.scrollTop) {
      this.setState({ bgColor: "transparent" });
    } else {
      this.setState({ bgColor: "red" });
    }
  }

  render() {
    const { bgColor } = this.state;
    return (
      <div id="app" style={{ background: bgColor }}></div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))