jquery - 垂直滚动然后滑过各个部分

Question

我需要一些帮助。我试图创建一个固定在顶部的 slider ，一旦我滚动到足够多(我得到并且可以做的那一点)，那么它应该滚动 3 个内容和文本部分。我应该如何做的任何指示。这是我的标记。

<div class="fixed-slider">
        <section class=" section slider slider-one vertical-align" id="step1">
            <div class="container">
                <div class="row is-animated vertical-align">
                    <div class="col-md-5 col-xs-12">
                        <ul class="indicators">
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <span>Step 1</span>
                        <h2>Download the app on your phone</h2>
                        <p>Download it <span class="selling">Free</span> for your Apple iPhone</p>
                        <a href=""><img src="img/apple-store.svg" alt=""></a>
                    </div>
                    <div class="col-md-7 col-xs-12">
                        <img src="img/step1.png" alt="">
                    </div>
                </div>
            </div>
        </section>
        <section class="section slider slider-two vertical-align" id="step2">
            <div class="container">
                <div class="row vertical-align is-animated">
                    <div class="col-md-5 col-xs-12">
                        <ul class="indicators">
                            <li></li>
                            <li class="active"></li>
                            <li></li>
                        </ul>
                        <span>Step 2</span>
                        <h2>Select your style</h2>
                        <p>Choose from a tange of hair and make up styles for any ocassion</p>
                        <a href=""><img src="img/apple-store.svg" alt=""></a>
                    </div>
                    <div class="col-md-7 col-xs-12">
                        <img src="img/step2.png" alt="">
                    </div>
                </div>
            </div>
        </section>
        <section class="section slider slider-three vertical-align" id="step3">
            <div class="container">
                <div class="row vertical-align is-animated">
                    <div class="col-md-5 col-xs-12">
                        <ul class="indicators">
                            <li></li>
                            <li></li>
                            <li class="active"></li>
                            <li class="mobile-arrow"></li>
                        </ul>
                        <span>Step 3</span>
                        <h2>Make a Booking</h2>
                        <p>Our easy-to-use booking system allows for quick selection at a time that suits you.</p>
                        <a href=""><img src="img/apple-store.svg" alt=""></a>
                    </div>
                    <div class="col-md-7 col-xs-12">
                        <img src="img/step3.png" alt="">
                    </div>

                </div>
            </div>
        </section>
        </div>

Answer 1

你可以使用 fullPage.js使用 scrollOverflow 选项作为 in this example .

然后你可以使用 scroll Horizontally extension到达第一张幻灯片的底部后强制水平滚动。