react-sticky bug demo

by evan

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

html, body {
    margin: 0;
}

.title {
    height: 100px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 34px;
}

.titleSticky {
    z-index: 30;
}

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

.h1Sticky {
    z-index: 20;
}

h2 {
    background: white;
    height: 24px;
    margin: 0;
}

.h2Sticky {
    z-index: 10;
}

JavaScript 1.7

const {Sticky, StickyContainer} = ReactSticky;

function renderSections(sectionCount) {
	const sections = [];
    for (let i = 0; i < sectionCount; i++) {
    	sections.push((
            <StickyContainer key={i}>
                <Sticky stickyClassName="h1Sticky">
                    <h1>{`This is section #${i}`}</h1>
                </Sticky>
            <Lorem />
            </StickyContainer>

        ));
    }

    ReactDOM.render(
        <StickyContainer>
        	<Sticky stickyClassName="titleSticky">
            	<div className="title">
                	react-sticky bug demo
                </div>
            </Sticky>
			{sections}
        </StickyContainer>,
      document.getElementById('container')
    );    
}

let i = 1;
renderSections(1);
setTimeout(() => renderSections(100), 1000);


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 stickyClassName="h2Sticky">
    <h2>Sub-section A: Alpha</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...