Skrollrは最初の3つのセクションで問題なく、その後正常に動作しなくなります

Question

5つのセクションのWebサイトがあり、タイトルが上にスクロールして次のセクションが表示されます。私の頭を包み込むことはむしろ難しいことが分かっています。私はそれが最初の3つのセクションのために働いているが、それはちょうど終了するいくつかの奇妙な理由のために。

今、私は最後の2つのセクションにプレースホルダを使用しているので、無視してください。

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> 

セクションのすべてが100％の幅と高さを持っています。彼らはposition:fixedを開始し、次のセクションを明らかにするタイトルが一番上になるまでposition:relativeに切り替えて、画面をスクロールすることができます。

助力/アドバイスをいただければ幸いです。

Answer 1

Skrollrでの私の経験から、要素を位置として保持するときは最も効果的でした。固定されました。要素をposition：relativeに設定する代わりに、y軸に沿って-100％の遷移が機能しますか？