javascript - Skrollr 前 3 部分表现良好，然后就不再表现良好

Question

我有一个包含 5 个部分的网站，其标题可以向上滚动以显示下一个部分。事实证明，我很难理解这一点。我让它在前 3 部分工作，但由于一些奇怪的原因，它就退出了。

现在我在最后两个部分使用占位符，所以忽略它。

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:fixed”时效果最佳。沿 y 轴设置 -100% 的过渡是否适合您，而不是将元素设置为相对位置？