A simple affix React component.

AffixWrapper.jsx

/**
 * @author Juliano Castilho <[email protected]>
 * ES6 conversion by [email protected]
 */
import React from 'react';
import ClassNames from 'classnames';

class AffixWrapper extends React.Component {

  constructor() {
    super();

    this.state = {
      affix: false
    };

    this.handleScroll = this.handleScroll.bind(this);
  }

  /**
   * @return {void}
   */
  handleScroll() {
    var affix = this.state.affix;
    var offset = this.props.offset;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    if (!affix && scrollTop >= offset) {
      this.setState({
        affix: true
      });
    }

    if (affix && scrollTop < offset) {
      this.setState({
        affix: false
      });
    }
  }

  /**
   * @return {void}
   */
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
    this.handleScroll();
  }

  /**
   * @return {void}
   */
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  render() {
    var affix = this.state.affix ? 'affix' : '';
    var {className, offset } = this.props;

    return (
      <div className={ClassNames(className, affix)}>
        {this.props.children}
      </div>
    );
  }
}

AffixWrapper.propTypes = {
  offset: React.PropTypes.number
};

export default AffixWrapper;

Example.jsx

<AffixWrapper className="some-cool-element" id="lalala" offset={200}>
  <div>Put whatever you want here</div>
</AffixWrapper>