JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.spacer {
    font-size: 40px;
    line-height: 200px;
    text-align: center;
    color: #ccc;
}

.spacer:before {
    content: '▼';
}

.waypoint-line {
    border-top: 1px dashed red;
}

.message {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    text-align: center;
    background-color: #999;
    opacity: 0.5;
    color: #fff;
    padding: 10px;
}

JavaScript 1.7

var PropTypes = React.PropTypes;

/**
 * Calls a function when you scroll to the element.
 */
var Waypoint = React.createClass({
  propTypes: {
    onEnter: PropTypes.func,
    onLeave: PropTypes.func,
    // threshold is percentage of the height of the visible part of the
    // scrollable parent (e.g. 0.1)
    threshold: PropTypes.number,
  },

  _wasVisible: false,

  /**
   * @return {Object}
   */
  getDefaultProps: function() {
    return {
      threshold: 0.1,
      onEnter: function() {},
      onLeave: function() {},
    };
  },

  componentDidMount: function() {
    this.scrollableParent = this._findScrollableParent();
    this.scrollableParent.addEventListener('scroll', this._handleScroll);
    this.scrollableParent.addEventListener('resize', this._handleScroll);
    this._handleScroll();
  },

  componentDidUpdate: function() {
    // The element may have moved.
    this._handleScroll();
  },

  componentWillUnmount: function() {
    this.scrollableParent.removeEventListener('scroll', this._handleScroll);
    this.scrollableParent.removeEventListener('resize', this._handleScroll);
  },

  /**
   * Traverses up the DOM to find a parent container which has an overflow style
   * that allows for scrolling.
   *
   * @return {Object} the closest parent element with an overflow style that
   *   allows for scrolling. If none is found, the `window` object is returned
   *   as a fallback.
   */
  _findScrollableParent: function() {
    var node = this.getDOMNode();

    while (node.parentNode) {
      node = node.parentNode;

      if (node === document) {
        continue;
      }
      var style = window.getComputedStyle(node);
      
      var overflowY = style.getPropertyValue('overflow-y') ||
        style.getPropertyValue('overflow');

      if (overflowY === 'auto' || overflowY === 'scroll') {
        return node;
      }
    }

    // A scrollable parent element was not found, which means that we need to do
    // stuff on window.
    return...