implement faider functionality

src/jade/index.jade

@@ -57,7 +57,7 @@ html
       a(href='https://github.com/koodiklinikka/koodiklinikka.fi')
         i.fa.fa-github
 
-    #fade.fader
+    #fader
 
 
     script(src='js/bundle.js')

src/js/components/fader.jsx

@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('React');
+
+function clamp(min, max, value) {
+  return Math.min(Math.max(value, min), max);
+}
+
+module.exports = React.createClass({
+  getDefaultProps() {
+    return {
+      threshold: 100
+    };
+  },
+  getInitialState() {
+    return {
+      opacity: 0
+    };
+  },
+  onScroll() {
+    var scrollableDistance = document.body.scrollHeight - window.innerHeight,
+        scrollTop = window.pageYOffset || document.documentElement.scrollTop,
+        distanceToBottom = scrollableDistance - scrollTop;
+
+    this.setState({
+      opacity: clamp(0, 1, distanceToBottom / this.props.threshold)
+    });
+  },
+  componentDidMount() {
+    window.addEventListener('scroll', this.onScroll);
+    this.onScroll();
+  },
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.onScroll);
+  },
+  render() {
+    var style = {
+      opacity: this.state.opacity
+    };
+
+    return (
+      <div className="fader" style={style}></div>
+    )
+  }
+});

src/js/main.js

@@ -7,3 +7,6 @@ React.render(
   require('./components/inviteForm')(),
   document.getElementById('invite-form'));
 
+React.render(
+  require('./components/fader')(),
+  document.getElementById('fader'));