React

by Spencer Smith

HTML

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

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  height: 1000px;
}

Babel + JSX

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

  componentDidMount() {
    window.addEventListener("scroll", this.listenScroll);
  }
  
  listenScroll() {
  	if(document.body.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"))