gistfile1.js

var React = require('react/addons'),
    supportPageOffset = window.pageXOffset !== undefined,
    isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"),
    components = [],
    lastValue = -1,
    ticking = false,
    windowHeight = window.innerHeight,
    compose = function() { // from underscore
      var args = arguments;
      var start = args.length - 1;
      return function() {
        var i = start;
        var result = args[start].apply(this, arguments);
        while (i--) result = args[i].call(this, result);
        return result;
      };
    };

+function() {
  window.addEventListener("resize", evt => windowHeight = window.innerHeight)
  window.addEventListener('scroll', requestTick)
  requestTick()
}()

function getPercentOnscreen(component) {

}

function getPercentVisible(component) {
  var r = component.getDOMNode().getBoundingClientRect(),
      h = windowHeight,
      res;
  if (r.top > h || r.bottom < 0) {
    res = 0
  } else if (r.top < 0 && r.bottom > 0) {
    res = 1-(r.height - r.bottom) / r.height
  } else if (r.top < h && r.bottom > h) {
    res = 1-(r.bottom - h) / r.height
  } else {
    res = 1
  }
  return clampy(res, 0, 1);
}

function clampy(val, min, max) {
  return Math.max(min, Math.min(max, val))
}

function requestTick() {
  if (!ticking) {
    requestAnimationFrame(function() {
      cMap(components, compose(setState, addPercentVisible))
      ticking = false;
    })
  }
  ticking = true
}

function cMap(components, transform) {
  for (var i=components.length-1;i>=0;--i) transform(components[i]);
  return components
}

function setState(component) {
  component.setState(component._scrlxOptions)
  return component
}

function addPercentVisible(component) {
  component._scrlxOptions.percentVisible = parseInt(getPercentVisible(component)*1000,10)/1000
  return component
}

var Scrollex = {
  _scrlxOptions: {},
  _scrlxComponents: function() {
    return components
  },

  componentWillMount: function() {
    this._scrollexIdx = components.push(this)
  },

  componentWillUnmount: function() {
    components.splice(this._scrollexIdx, 1)
  }
}

module.exports = Scrollex