我有一个5部分的网站，标题向上滚动以显示下一部分。事实证明，缠住我的头很难。我在前三个部分中使用了它，但是出于某种奇怪的原因，它退出了。
现在，我在最后两节中使用占位符，因此请忽略它。
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，以便他们可以滚动离开屏幕。任何帮助/建议，将不胜感激。
最佳答案
根据我在Skrollr的经验，在将元素保持在固定位置时效果最佳。沿y轴-100％的过渡对您有用，而不是将元素设置为position：relative吗？
关于javascript - Skrollr在前三节中表现不错，然后停止表现良好，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38775976/