jQuery 使用页面滚动移动 div答案

【问题标题】：jQuery Moving a div with page scrolljQuery 使用页面滚动移动 div
【发布时间】：2015-06-15 16:38:23
【问题描述】：

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

任何帮助将不胜感激。

【问题讨论】：

您是否尝试过自己编写脚本？
我做了，我会尝试更新问题，但我对 pageYOffset 不熟悉
您在 jquery 中的每个 css 属性之后都有分号 ;。不需要它们，实际上，您根本不应该拥有它们。 jsfiddle.net/yak613/657mm7Lz
@yak613：对不起，我之前知道并更正了它们，但发布了旧链接，感谢您指出。

标签： javascript jquery html css

【解决方案1】：

也许你可以使用 skrollr.js

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

【讨论】：

感谢您的建议，但处理其他框架可能会使事情变得复杂。自定义代码将是最有效的方法，不过感谢您的回答。

【解决方案2】：

我认为使用“位置：固定；”是最简单的方法。我改变了它，它对我有用。

第 23 行：

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

然后您可以设置位置（左、上、...），使其看起来像您分享的示例。

【讨论】：

谢谢，但我希望 div 在穿过父 div 后消失，而 position:fixed 是不可能的
连这个都不行？ stackoverflow.com/questions/5218927/…
使用固定位置的 z-index 似乎是另一种选择，让我尝试一下，如果可行，它将是一个更简单的解决方案。