Jquery 垂直滚动，然后在各个部分之间滑动

我需要一些帮助。我正在尝试创建一个固定在顶部的滑块，一旦我滚动到足够的位置（我得到并且可以做到），那么它应该滚动到内容和文本的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>

第一步
在手机上下载应用程序
为您的苹果iPhone免费下载






步骤2
选择你的风格
从一束头发中选择适合任何场合的化妆风格







步骤3
预订
我们易于使用的预订系统允许在适合您的时间进行快速选择

您可以将

滚动溢出

选项用作

---

然后，当您到达第一张幻灯片的底部时，可以使用强制水平滚动。

不确定您具体要求什么。试着把这个放到JSFIDLE上，更清楚地说明你在寻找什么。