javascript - jQuery用页面滚动移动div

我想基于页面滚动来移动div，我已经阅读了this问题，但是它基于纯JavaScript。

这是我创建的fiddle，这是我want所做的。

这是代码：

HTML：

<div class="outer-container">
    <div class="inner-container">
        <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/03/homeslide1a.png'); height: 100%; background-size: cover;" class="slider-background-image' ">
            <div class="slide-inner-container">
                <div class="slider-content">
                    <h4>The Course</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    </p>
                </div>
                <!-- /.slider-content -->
                <div class="clearfix"></div>
            </div>
            <!-- /.slide-inner-container -->
        </div>
        <!-- /.slide -->
        <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/02/2-Home-membership.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
            <div class="slide-inner-container">
                <!-- More content here soon -->
            </div>
            <!-- /.slide-inner-container -->
        </div>
        <!-- /.slide -->
        <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/02/2-Home-special-events.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
            <div class="slide-inner-container">
                <!-- More content here soon -->
            </div>
            <!-- /.slide-inner-container -->
        </div>
        <!-- /.slide -->
        <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/03/CORKHome-_position4.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
            <div class="slide-inner-container">
                <!-- More content here soon -->
            </div>
            <!-- /.slide-inner-container -->
        </div>
        <!-- /.slide -->


    </div>
    <!-- /.inner-container -->
</div>
<!-- /.outer-container -->

我希望类'.slider-content'的div像reference link一样在页面滚动中移动

任何帮助，将不胜感激。

最佳答案

也许您可以使用skrollr.js

查看此website的演示
它类似于你想要的

关于javascript - jQuery用页面滚动移动div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30850448/