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的演示它类似于你想要的东西

Answer 2

我认为使用“position：fixed;”是最简单的方法。我改变了它，它对我有用。

第23行：

.slider-content{
    position: fixed;
    //...
}

然后您可以设置位置（左侧，顶部，......），使其与您共享的示例中的一样。

jQuery使用页面滚动移动div

2 个答案: