Smoother stickyOnScroll...?

[mo-ib]

This way the wrapper spaces out the height of the inner component, so there's no snapping:

onScroll() {
      const {scrollY} = window
      const {height, sticky} = this.state
      const {clientHeight} = this.componentWrap
      const scrolledPastThreshold = scrollY >= scrollThreshold

      if (height === 0 && clientHeight > 0) {
        this.setState({height: clientHeight})
      }

      if (scrolledPastThreshold && !sticky) {
        this.setState({sticky: true})
      } else if (!scrolledPastThreshold && sticky) {
        this.setState({sticky: false})
      }
    }

    render() {
      const {height, sticky} = this.state
      const wrapProps = {
        className: 'sticky-wrap',
        ref: c => { this.componentWrap = c },
        style: {},
      }

      if (height > 0) {
        wrapProps.style.height = height
      }

      return (
        <div {...wrapProps}>
          <InnerComponent
            {...this.props}
            ref={c => { this.innerComponent = c }}
            height={height}
            sticky={sticky}
          />
        </div>
      )
    }