Skrollr ist in Ordnung für die ersten 3 Abschnitt, und hört dann auf, gut durchzuführen

Question

Ich habe eine Website mit 5 Abschnitten, mit Titeln, die nach oben scrollen, um den nächsten Abschnitt zu enthüllen. Es erweist sich als ziemlich schwierig, meinen Kopf einzuwickeln. Ich habe es für die ersten 3 Abschnitte funktioniert, aber aus irgendeinem seltsamen Grund danach wird es einfach beendet.

Momentan verwende ich Platzhalter für die letzten 2 Abschnitte, ignorieren Sie das einfach.

HTML:

  <section class="section-1"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="light-blue-block" data-0="top:100px;" data-top-bottom="top:210px;"></div> 
         <div class="dark-blue-block" data-0="top:0px;" data-top-bottom="top:60px;"></div> 
         <div class="maroon-block" data-0="top:80px;" data-top-bottom="top:175px;"></div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-11 col-md-offset-1"> 
         <h1 data-0="top:125px;" data-top-bottom="top:225px;">WE ARE THE BUILDING BLOCKS OF DREAMS</h1> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-7 col-md-offset-4"> 
         <p data-0="top:335px;" data-top-bottom="top:440px;">The Texas A&M Foundation is the primary academic fundraising institution for Texas A&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. </p> 
        </div> 
       </div> 
      </div> 
     </section> 

     <section class="section-below-2" data-anchor-target="#title2" data-0="z-index:500; position:fixed;" data-top="z-index:500; position:relative;"> 
      <div class="box-1"> 
       <h1><span>student</span> Impact <a href="#">Learn More</a></h1> 
       <div class="overlay-container"> 
        <div class="overlay"> 
         <h2>Student Impact</h2> 
         <p>Scholarships and fellowships enrich an individual student’s education at Texas A&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.</p> 
        </div> 
       </div> 
      </div> 

      <div class="box-2"> 
       <h1><span>faculty</span> Impact <a href="#">Learn More</a></h1> 
       <div class="overlay-container"> 
        <div class="overlay"> 
         <h2>Faculty Impact</h2> 
         <p>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&M. You can also fund a teaching award to acknowledge Texas A&M’s best faculty members.</p> 
        </div> 
       </div> 
      </div> 

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

      <div class="box-4"> 
       <h1><span>spirit</span> Impact <a href="#">Learn More</a></h1> 
       <div class="overlay-container"> 
        <div class="overlay"> 
         <h2>Spirit Impact</h2> 
         <p>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.</p> 
        </div> 
       </div> 
      </div> 

      <div class="clear"></div> 

      <div class="centered-text"> 
       <div class="container"> 
        <div class="row"> 
         <div class="col-md-8 col-md-offset-2"> 
          <p>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.</p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </section> 
     <section id="title2" class="section-above-2" data-bottom-top="position: relative; z-index:500;" data-top="position: fixed; top:0; height:133px;"><h1>You Can Make Someone's Dream Come True</h1></section> 

     <section class="section-below-3" data-anchor-target="#title3" data-0="z-index:499; position:fixed;" data-top="z-index:499; position:relative;"> 
      <div class="info-box"> 
       <p>Our child dreamers represent the future—the future we seek to support with your help. While your gifts benefit today’s Texas A&M, the reality is that endowed gifts live forever. This means that your gift today can support tomorrow’s dreamers:</p> 
      </div> 
      <div class="dragon-slayers"></div> 
      <div class="super-heroes"></div> 
      <div class="flying"></div> 
      <div class="building-blocks"></div> 
      <div class="grey-box"></div> 
      <div class="rock-star"></div> 
      <div class="dblue-box"></div> 
      <div class="info-box-2"> 
       <p>Dreams like these and many others are supported by gifts to the Texas A&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.</p> 
      </div> 
      <div class="clear"></div> 
     </section> 
     <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;"><h1>Meet Our Dreamers</h1></section> 

     <section class="section-below-4" data-anchor-target="#title4" data-0="z-index:498; position:fixed;" data-top="z-index:498; position:relative;"> 
      <div class="info-box"> 
       <p>Our child dreamers represent the future—the future we seek to support with your help. While your gifts benefit today’s Texas A&M, the reality is that endowed gifts live forever. This means that your gift today can support tomorrow’s dreamers:</p> 
      </div> 
      <div class="dragon-slayers"></div> 
      <div class="super-heroes"></div> 
      <div class="flying"></div> 
      <div class="building-blocks"></div> 
      <div class="grey-box"></div> 
      <div class="rock-star"></div> 
      <div class="dblue-box"></div> 
      <div class="info-box-2"> 
       <p>Dreams like these and many others are supported by gifts to the Texas A&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.</p> 
      </div> 
      <div class="clear"></div> 
     </section> 
     <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;"><h1>Meet Our Dreamers</h1></section> 

     <section class="section-below-5" data-anchor-target="#title5" data-0="z-index:497; position:fixed;" data-top="z-index:497; position:relative;"> 
      Testing this<br/>testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>testing 
      <p>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.</p> 
      <p>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.</p> 
      <p>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.</p> 
     </section> 
     <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;"><h1>Test4</h1></section> 

Alle Abschnitte haben eine Breite und Höhe von 100%. Sie beginnen position:fixed, bis der Titel, der den nächsten Abschnitt enthüllt, den Anfang erreicht und dann zu position:relative wechselt, damit sie vom Bildschirm scrollen können.

Jede Hilfe/Beratung wäre willkommen.

Answer 1

Aus meiner Erfahrung mit Skollr funktioniert es am besten, wenn die Elemente als Position gehalten werden: behoben. Würde ein Übergang von -100% entlang der y-Achse für Sie funktionieren, anstatt die Elemente auf Position zu setzen: relativ?