React Sticky demo

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="./styles.css">
    <script src="https://jspm.io/system@0.18.js"></script>
    <script type="text/javascript" src="config.js"></script>
    <script type="text/javascript">
      System.import('./app.jsx');
    </script>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-dom.min.js"></script>
    <script data-require="react-with-addons@0.14.0" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-with-addons.min.js"></script>
    <script data-require="react-dom@0.14.0" data-semver="0.14.0" src="//fb.me/react-dom-0.14.0.js"></script>
    <script data-require="require.js@2.1.20" data-semver="2.1.20" src="//requirejs.org/docs/release/2.1.20/minified/require.js"></script>
   </head>

  <body>
    <div id="app"></div>
  </body>

</html>

import React from 'react';
import ReactDOM from 'react-dom';
import Sticky from 'https://cdn.rawgit.com/ShyamRaj/react-stickky/27d1e371/lib/index.js';

var HelloPage = React.createClass({
  doSomething: function(btn){
    alert("You got it, boss! From button " + btn);
  },
  render: function() {
    return <div>
        <Sticky className="stickyContent">
          <h1>Hello, Sticky!</h1>
        </Sticky>
        <div className="content">
          <Sticky className="stickyContentBottom" stickyWidth="100%"></Sticky>
          <h4>What is Lorem Ipsum?</h4>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </p>
        </div>
    </div>;
  }
});

ReactDOM.render(
  <HelloPage />,
  document.getElementById("app")
)

/*global System */
'use strict';

/* if you need any specific jspm config place it here */
System.config({
  transpiler: 'babel',
  packages: {
    './': {
      defaultExtension: false
    }
  },
  map: {
    //'react': 'npm:react@0.13'
  }
});

.stickyContent {
  background-color: white;
  font-size: 24px;
  top: 0;
}

.stickyContentBottom {
  background-color: grey;
  height: 50px;
  font-size: 26px;
  color: white;
  text-align: center;
  left: 0;
  bottom: 0;
}

.stickyContentBottom:after {
  content: 'Sticky content at the bottom';
}

body {
  height: 1000px;
}

.content {
  font-size: 16px;
  color: grey;
}

# React-Stickky

[![Build Status](https://travis-ci.org/ShyamRaj/react-stickky.svg?branch=master)](https://travis-ci.org/ShyamRaj/react-stickky)

> A simple React sticky component

### Description
 Wrap any code within 
 
 ```
 <Sticky>
    <h1>Now I'm sticky</h1>
 </Sticky>
 ``` 
 and it will be sticky

 ```
 <Sticky
      className={style}
      scrollIndex="100"
      stickyWidth="100%"
      isSticky={props.isChecked}
 >
 </Sticky>
 ```
 ### Demo
 
 http://embed.plnkr.co/XvIwT0cAhEFxRL3clq7D/

 ### Options are optional
 - **className** - Any CSS styles needed to pass down to child components
 - **scrollIndex** - @scrollIndex y=100 the stickyness will apply to the wrapped component
 - **isSticky** - A function that takes true or false to toggle stickyness
 - **stickyWidth** - Takes width if passed or defaults to 100%