react-sticky demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="http://rawgit.com/captivationsoftware/react-sticky/master/dist/react-sticky.js"></script>
<script src="https://rawgit.com/captivationsoftware/react-sticky/master/dist/react-sticky.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

h1 {
    background: white;
    height: 30px;
    margin: 0;
}

h2 {
    height: 18px;
    margin: 0;    
}

JavaScript 1.7

const {Sticky, StickyContainer} = ReactSticky;

ReactDOM.render(
	<StickyContainer>
    	<StickyContainer>
    	<Sticky>
			<h1>AAAAA</h1>        
        </Sticky>
  		<Lorem />
        </StickyContainer>
        <StickyContainer>
        <Sticky>
			<h1>BBBBB</h1>        
        </Sticky>
  		<Lorem />
        </StickyContainer>
        <StickyContainer>
        <Sticky>
			<h1>CCCCC</h1>        
        </Sticky>
  		<Lorem />
        </StickyContainer>
  	</StickyContainer>,
  document.getElementById('container')
);



function Lorem() {
	return <div>
    <StickyContainer>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend scelerisque porta. Pellentesque sodales, risus id pulvinar maximus, arcu dolor auctor tellus, vel porttitor lacus massa lobortis dolor. Mauris cursus, tortor in efficitur lacinia, orci felis tempus lorem, non lobortis ex risus a tellus. Aenean malesuada semper feugiat. Donec sagittis vulputate erat, nec vestibulum purus auctor ut. Mauris sollicitudin magna at odio convallis, eget cursus orci semper. Fusce mollis porta pretium. Quisque sem nunc, tempus id vulputate a, imperdiet nec dolor. Nulla id elit elit.</p>
<StickyContainer>
<Sticky>
	<h2>XXXXXX</h2>
</Sticky>
<p>Cras felis urna, finibus nec tincidunt non, feugiat id enim. Quisque tempor vel tellus vel vehicula. Cras mauris est, consectetur sed tellus non, vestibulum pharetra mauris. Cras posuere laoreet sagittis. Sed sodales mauris justo, at convallis dolor luctus vel. Nullam blandit lorem arcu, dignissim maximus eros tempus commodo. Nullam suscipit tempus tellus sed venenatis. Donec sit amet lorem ac justo lacinia interdum sed vitae enim.</p>
</StickyContainer>
<StickyContainer>
<Sticky>
	<h2>
    YYYYYY
    </h2>
</Sticky>
<p>Nulla orci enim, vestibulum eu urna sed, dapibus mollis felis. Nunc risus sapien, accumsan in iaculis ac, viverra a libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu turpis ac urna rutrum laoreet at vitae...