A simple affix React component.

AffixWrapper.jsx

/**
 * @author Juliano Castilho <[email protected]>
 */
var React = require('react');
var joinClasses = require('react/lib/joinClasses');

var AffixWrapper = React.createClass({
  /**
   * @type {Object}
   */
  propTypes: {
    offset: React.PropTypes.number
  },

  /**
   * @return {Object}
   */
  getDefaultProps() {
    return {
      offset: 0
    };
  },

  /**
   * @return {Object}
   */
  getInitialState() {
    return {
      affix: false
    };
  },

  /**
   * @return {void}
   */
  handleScroll() {
    var affix = this.state.affix;
    var offset = this.props.offset;
    var 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);
  },

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

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

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

});

module.exports = AffixWrapper;

Example.jsx

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