Skrollr is fine for first 3 section, and then stops performing well
<p>I have a 5 section website, with titles that scroll up to reveal the next section. It's proving to be rather difficult to wrap my head around. I have it working for the first 3 sections, but for some odd reason after that it just quits.</p>

<p>Right now I am using placeholders for the last 2 sections, so just ignore that.</p>

<p>HTML:</p>

<pre><code>            &lt;section class="section-1"&gt;
            &lt;div class="container"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-12"&gt;
                        &lt;div class="light-blue-block" data-0="top:100px;" data-top-bottom="top:210px;"&gt;&lt;/div&gt;
                        &lt;div class="dark-blue-block" data-0="top:0px;" data-top-bottom="top:60px;"&gt;&lt;/div&gt;
                        &lt;div class="maroon-block" data-0="top:80px;" data-top-bottom="top:175px;"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-11 col-md-offset-1"&gt;
                        &lt;h1 data-0="top:125px;" data-top-bottom="top:225px;"&gt;WE ARE THE BUILDING BLOCKS OF DREAMS&lt;/h1&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-7 col-md-offset-4"&gt;
                        &lt;p data-0="top:335px;" data-top-bottom="top:440px;"&gt;The Texas A&amp;M Foundation is the primary academic fundraising institution for Texas A&amp;M University. We work with you—whether you are a former student, corporation or other supporter—to match your charitable interests with the university’s priorities. &lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/section&gt;

        &lt;section class="section-below-2" data-anchor-target="#title2" data-0="z-index:500; position:fixed;" data-top="z-index:500; position:relative;"&gt;
            &lt;div class="box-1"&gt;
                &lt;h1&gt;&lt;span&gt;student&lt;/span&gt; Impact &lt;a href="#"&gt;Learn More&lt;/a&gt;&lt;/h1&gt;
                &lt;div class="overlay-container"&gt;
                    &lt;div class="overlay"&gt;
                        &lt;h2&gt;Student Impact&lt;/h2&gt;
                        &lt;p&gt;Scholarships and fellowships enrich an individual student’s education at Texas A&amp;M. You may want to help first-generation students, those with urgent financial needs, those who show exceptional academic promise, or students studying in a particular department or college.&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="box-2"&gt;
                &lt;h1&gt;&lt;span&gt;faculty&lt;/span&gt; Impact &lt;a href="#"&gt;Learn More&lt;/a&gt;&lt;/h1&gt;
                &lt;div class="overlay-container"&gt;
                    &lt;div class="overlay"&gt;
                        &lt;h2&gt;Faculty Impact&lt;/h2&gt;
                        &lt;p&gt;You can support faculty research and teaching through a faculty chair, professorship or fellowship. Gifts like these attract superior professors who in turn lure top students to Texas A&amp;M. You can also fund a teaching award to acknowledge Texas A&amp;M’s best faculty members.&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="box-3"&gt;
                &lt;h1&gt;&lt;span&gt;college&lt;/span&gt; Impact &lt;a href="#"&gt;Learn More&lt;/a&gt;&lt;/h1&gt;
                &lt;div class="overlay-container"&gt;
                    &lt;div class="overlay"&gt;
                        &lt;h2&gt;College Impact&lt;/h2&gt;
                        &lt;p&gt;Exceptional programs and facilities attract and retain exceptional faculty. Gifts that benefit a specific Texas A&amp;M college, department or other unit can be directed towards construction, renovation, equipment purchases or a lecture series.&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="box-4"&gt;
                &lt;h1&gt;&lt;span&gt;spirit&lt;/span&gt; Impact &lt;a href="#"&gt;Learn More&lt;/a&gt;&lt;/h1&gt;
                &lt;div class="overlay-container"&gt;
                    &lt;div class="overlay"&gt;
                        &lt;h2&gt;Spirit Impact&lt;/h2&gt;
                        &lt;p&gt;Gifts that benefit student activities cultivate spirit and build leaders outside of the classroom. You can fund student programs such as Fish Camp or Big Event, or you can create scholarships based on participation in certain groups, such as the Corps of Cadets.&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="clear"&gt;&lt;/div&gt;

            &lt;div class="centered-text"&gt;
                &lt;div class="container"&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="col-md-8 col-md-offset-2"&gt;
                            &lt;p&gt;Your gift can create scholarships, advance faculty endeavors, enhance student programs or fund new buildings. Learn how you can support one of our four impact areas above.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/section&gt;
        &lt;section id="title2" class="section-above-2" data-bottom-top="position: relative; z-index:500;" data-top="position: fixed; top:0; height:133px;"&gt;&lt;h1&gt;You Can Make Someone's Dream Come True&lt;/h1&gt;&lt;/section&gt;

        &lt;section class="section-below-3" data-anchor-target="#title3" data-0="z-index:499; position:fixed;" data-top="z-index:499; position:relative;"&gt;
            &lt;div class="info-box"&gt;
                &lt;p&gt;Our child dreamers represent the future—the future we seek to support with your help. While your gifts benefit today’s Texas A&amp;M, the reality is that endowed gifts live forever. This means that your gift today can support tomorrow’s dreamers:&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="dragon-slayers"&gt;&lt;/div&gt;
            &lt;div class="super-heroes"&gt;&lt;/div&gt;
            &lt;div class="flying"&gt;&lt;/div&gt;
            &lt;div class="building-blocks"&gt;&lt;/div&gt;
            &lt;div class="grey-box"&gt;&lt;/div&gt;
            &lt;div class="rock-star"&gt;&lt;/div&gt;
            &lt;div class="dblue-box"&gt;&lt;/div&gt;
            &lt;div class="info-box-2"&gt;
                &lt;p&gt;Dreams like these and many others are supported by gifts to the Texas A&amp;M Foundation. We encourage you to think about giving with a long-term mindset. And remember: no matter their dreams, you can make them come true.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section id="title3" class="section-above-3" data-bottom-top="position: relative; z-index:499; height:133px" data-top="position: fixed; top:0; z-index:501; height:133px;"&gt;&lt;h1&gt;Meet Our Dreamers&lt;/h1&gt;&lt;/section&gt;

        &lt;section class="section-below-4" data-anchor-target="#title4" data-0="z-index:498; position:fixed;" data-top="z-index:498; position:relative;"&gt;
            &lt;div class="info-box"&gt;
                &lt;p&gt;Our child dreamers represent the future—the future we seek to support with your help. While your gifts benefit today’s Texas A&amp;M, the reality is that endowed gifts live forever. This means that your gift today can support tomorrow’s dreamers:&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="dragon-slayers"&gt;&lt;/div&gt;
            &lt;div class="super-heroes"&gt;&lt;/div&gt;
            &lt;div class="flying"&gt;&lt;/div&gt;
            &lt;div class="building-blocks"&gt;&lt;/div&gt;
            &lt;div class="grey-box"&gt;&lt;/div&gt;
            &lt;div class="rock-star"&gt;&lt;/div&gt;
            &lt;div class="dblue-box"&gt;&lt;/div&gt;
            &lt;div class="info-box-2"&gt;
                &lt;p&gt;Dreams like these and many others are supported by gifts to the Texas A&amp;M Foundation. We encourage you to think about giving with a long-term mindset. And remember: no matter their dreams, you can make them come true.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section id="title4" class="section-above-4" data-bottom-top="position: relative; z-index:498;" data-top="position: fixed; top:0; z-index:501; height:133px;"&gt;&lt;h1&gt;Meet Our Dreamers&lt;/h1&gt;&lt;/section&gt;

        &lt;section class="section-below-5" data-anchor-target="#title5" data-0="z-index:497; position:fixed;" data-top="z-index:497; position:relative;"&gt;
            Testing this&lt;br/&gt;testing&lt;br/&gt;testing&lt;br/&gt;testing&lt;br/&gt;testing&lt;br/&gt;testing&lt;br/&gt;testing&lt;br/&gt;testing&lt;br/&gt;testing
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis congue sapien, sit amet maximus nunc malesuada nec. Nullam at turpis accumsan, tincidunt elit in, finibus orci. Aliquam dui metus, aliquet sed ligula eu, placerat semper erat. Ut id risus dignissim, lobortis elit suscipit, vestibulum risus. Etiam tincidunt a ligula sit amet bibendum. Nunc luctus, massa sit amet aliquet posuere, ligula nibh gravida ipsum, non semper augue nunc eu nibh. Nulla lacinia in eros quis rutrum. Donec viverra, nisi vel suscipit hendrerit, orci odio vehicula nisl, vitae mattis mauris mauris interdum ante. Nullam leo lacus, maximus congue vestibulum sit amet, aliquet vitae velit.&lt;/p&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis congue sapien, sit amet maximus nunc malesuada nec. Nullam at turpis accumsan, tincidunt elit in, finibus orci. Aliquam dui metus, aliquet sed ligula eu, placerat semper erat. Ut id risus dignissim, lobortis elit suscipit, vestibulum risus. Etiam tincidunt a ligula sit amet bibendum. Nunc luctus, massa sit amet aliquet posuere, ligula nibh gravida ipsum, non semper augue nunc eu nibh. Nulla lacinia in eros quis rutrum. Donec viverra, nisi vel suscipit hendrerit, orci odio vehicula nisl, vitae mattis mauris mauris interdum ante. Nullam leo lacus, maximus congue vestibulum sit amet, aliquet vitae velit.&lt;/p&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis congue sapien, sit amet maximus nunc malesuada nec. Nullam at turpis accumsan, tincidunt elit in, finibus orci. Aliquam dui metus, aliquet sed ligula eu, placerat semper erat. Ut id risus dignissim, lobortis elit suscipit, vestibulum risus. Etiam tincidunt a ligula sit amet bibendum. Nunc luctus, massa sit amet aliquet posuere, ligula nibh gravida ipsum, non semper augue nunc eu nibh. Nulla lacinia in eros quis rutrum. Donec viverra, nisi vel suscipit hendrerit, orci odio vehicula nisl, vitae mattis mauris mauris interdum ante. Nullam leo lacus, maximus congue vestibulum sit amet, aliquet vitae velit.&lt;/p&gt;
        &lt;/section&gt;
        &lt;section id="title5" class="section-above-5" data-bottom-top="position: relative; z-index:497;" data-top="position: fixed; top:0; z-index:501; height:133px;"&gt;&lt;h1&gt;Test4&lt;/h1&gt;&lt;/section&gt;
</code></pre>

<p>All of the sections have a width and height of 100%. They start out <code>position:fixed</code> until the title that reveals the next section reaches the top, and then it switches to <code>position:relative</code> so they can scroll off the screen.</p>

<p>Any help/advice would be appreciated.</p>