html - 允许 div 滚动设置在另一个 div 后面

Question

我有一个 iPad 框架，我想在它后面有一个更大的图像(页面内容)，当您滚动时它会向下滚动。我的 css 比 fiddle 中的示例更复杂 https://jsfiddle.net/vk0jk37v/但我似乎无法让它发挥作用。

在我的真实网页中，我想正常向下滚动直到到达此图像，然后我希望滚动影响此图像中的“页面内容”。我想让用户在图像的“页面内容”结束后继续正常滚动。

编辑:我已经更新了 fiddle ，它很粗糙，但本质上是我正在寻找的东西，除了当我将 iPad 框架设置在图像顶部时，我无法让内容滚动。我需要它的原因是在调整窗口大小时不覆盖“固定导航”或黑色边线时将图像保持在一起。对此有什么想法吗？并感谢 Felk 在正确方向上的提示

Edit2:所附图片是我应用此内容的上下文。

示例 html

<div class="container">
    <img class="frame" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
    <div class="inner">
        <img src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png" />
    </div>
</div>

示例 CSS

.container {
    width: 70%;
    position: relative;
}
.frame {
    /* position: absolute; */
    width: 100%;
    z-index: 100;
}
 .inner {
    height: 558px;
    overflow: scroll;
    position: absolute; 
    top: 14%;
    left: 38px;
}
.inner img {
    width: 92%;
    z-index: -100;
}

Answer 1

好的。我试图修复你的 fiddle ，但最后我改变了太多。

如果我想做你的元素，我会解释我会做什么。 (希望我能充分理解您的问题)。

首先，我会使用 position:fixed 和负 z-index 将 ipad 的图像定位在背景中。现在我们的图像根本没有移动，因为位置是相对于窗口而不是任何元素放置的。此外，我们将您的内容的第一部分覆盖在图像上并可以很好地滚动。

然后我们关注滚动时 html 元素的正确流动，因此基本上在第一个下方(以及稍后在图像下方)会有更多内容。我添加了另一个红色背景的 div 以更好地说明问题。

html 看起来像这样:

<div class="container">
    <div class="outer">
        <img class="" src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png"/>
    </div>
        <div class="frame">
    <img class="ipad" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
        </div>

    <div class="moreContent"></div>

</div>

现在我们只关注将顶部内容与底部内容分开。为此，我们只需在第一个内容中添加一个大的 margin-bottom。现在，当滚动到第一个内容的末尾时，背景图像将显示，然后在边距超过最后一个内容后，内容将开始在图像上流动(这是您不想要的)

基本上我们有这个: FIDDLE1

现在是时候做一个非常简单的jquery了(如果我会用它总是简单的)。我们只需要向浏览器发出一些命令，所以我使用了这个:

$(window).scroll(function () {
            if ($(window).scrollTop() > 1127) {
                $(".frame").addClass('relative');
                $(".outer").addClass('no-margin');
            } 
             else {
                $(".frame").removeClass('relative');
                $(".outer").removeClass('no-margin');
            }           
        });

基本上我是在告诉浏览器，当滚动高于 1227px(高度)时，向 frame 添加一个类，向 outer 添加一个类，如果你向后滚动删除类。

然后我添加到 outer 的类将只删除第一个和最后一个 div 之间的大边距，而添加到 frame 的类只会使图像的容器相对所以 html 的流程是正常的，图像将与其余元素一起向下滚动。

当然，我选择的 1227px 是基于您提供的 jsfiddle 图像，但在您 future 的元素中，只要用 chrome 或类似的工具检查它，就不会很难找到您的第一个内容的真实高度。与我添加的大边距相同。

其余的更改是使尺寸正确并将窗口中的所有元素居中，宽度为 600 像素。

这里是最后的 FIDDLE