ComponentThatNeedsScrollHandling.js

import React, { Component } from 'react'
import classNames from 'classnames'
import styles from './Styles.css'

// Constant with scroll offset to trigger sticky
const SCROLL_OFFSET = 100

class ComponentThatNeedsScrollHandling extends Component {
  state = { sticky: false }
  ticking = false
  over = false
  scrollTop = 0

  componentDidMount() {
    document.addEventListener('scroll', this.onScroll, { passive: true })
  }

  componentWillUnmount() {
    document.removeEventListener('scroll', this.onScroll)
  }

  onScroll = event => {
    this.scrollTop = event.scrollY

    if (!this.ticking) {
      window.requestAnimationFrame(this.checkScrollPos)
    }

    this.ticking = true
  }

  checkScrollPos = () => {
    if (over && this.scrollTop < SCROLL_OFFSET) {
      this.setState({ sticky: false })
    } else if (!over && this.scrollTop > SCROLL_OFFSET) {
      this.setState({ sticky: true })
    }
  }

  render() {
    const className = classNames(styles.thing, {
      [styles.isSticky]: this.state.sticky,
    })
    
    return <div className={className} />
  }
}