javascript - jQuery 使用页面滚动移动一个 div

Question

我想根据页面滚动移动一个 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 一样在页面滚动上移动

如有任何帮助，我们将不胜感激。

Answer 1

也许你可以使用 skrollr.js

查看此演示 website和你想要的差不多