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

我有一个iPad框架，希望在它后面有一个更大的图像（页面内容），当你滚动时它会向下滚动。我的css比这里的例子更复杂，但我似乎连这个都做不到

在我的真实网页中，我想正常向下滚动，直到我看到这张图片，然后我想滚动来影响这张图片中的“页面内容”。之后，我想让用户继续正常滚动后，“页面内容”的图像结束

编辑：我已经更新了提琴，它很粗糙，但本质上是我想要的，除非我将iPad框架设置在图像顶部，我无法滚动内容。我之所以需要它，是为了在调整窗口大小时保持图像在一起，而不覆盖“固定导航”或黑色边线。有什么想法吗？谢谢你，费尔克给了我正确的提示

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>

---

嗯。我想帮你修小提琴，但最后我变了太多

如果我想做你的项目，我会向你解释我的想法。（如果我对你的问题理解得足够透彻，希望如此）

首先，我会将ipad的图像放置在背景上，位置为

position:fixed

和negative

z-index

。现在，我们看到图像完全不移动，因为位置是相对于窗口而不是任何元素放置的。而且我们有你的内容的第一部分在图像上并且很好的滚动

然后我们关注滚动时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>

基本上，我告诉浏览器，当滚动高于1227px（高度）时，将一个类添加到

frame

，将另一个类添加到

outer

，如果您向后滚动以删除这些类

然后，我添加到

outer

的类只会删除第一个和最后一个div之间的大边距，而添加到

frame

的类只会使图像的容器相对，因此html的流是正常的，图像将与其余元素一起向下滚动

当然，我选择的1227px基于您提供的JSFIDLE图像，但在您未来的项目中，使用chrome或类似浏览器查找第一个内容的真实高度并不难。我加的大幅度利润也是一样

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

---

这里是最后的

你好，阿尔瓦罗，我非常感谢你给我的书面答复。我只是很难让它工作。我添加了一个图像来突出我正在尝试做的事情。我认为您的解决方案可能有效，但我需要找到一种方法，让它在不使用位置固定的情况下工作（或者只在元素滚动时使用），以及让图像在ipad内滚动。再次感谢您，如果我能让您的答案生效，我会将您的答案标记为正确。与此同时，我仍然需要帮助。回家，但今天晚了。我一直在思考你想要实现的目标，老实说，即使我明天早上想一想（我也忍不住），今天，虽然我很累，但我找不到任何“简单”的方法来做你想做的事情。这是可以肯定的，但如果你的项目，想法和设计是我的。。。我确信我必须花很多时间才能达到正确的效果（可能比一天的工作时间还要多），虽然我喜欢在这里花一些时间帮忙（就像每天一样，我的任何疑问都会在stackoverflow中得到解决），但我想我不会花这么多时间来帮你。对不起。尽管如此，我还是会想一个简单的方法来做这件事，也许明天，新鲜而清醒，我会发现我错过了一些东西。如果soNo担心Alvaro，会让你知道的，非常感谢你的帮助和回应！嘿，阿尔瓦罗，你花了很多时间帮我解决这个问题，所以我想你可能会对我在benny和你自己的帮助下最终得到的解决方案感兴趣。jsfiddle.net/pkt6xnb5/5再次感谢！我没有完全理解你的问题。我想我现在知道了。如果有时间的话，我会在明天试着写一个答案，但如果错误的答案已经给了你，那就更复杂了。顺便说一句，javascript的需求是必要的。无论如何，获得你想要的东西的基础将是相似的。谢谢Alvaro，很抱歉这个错误的解释。这仍然很有帮助，目前你可以通过在Firefox和Opera中对元素进行粘性定位来实现这一点。Chrome正在重新实施它，微软正在考虑将其添加到即将推出的微软Edge中。搜索

位置：粘性了解更多信息。不过，在它获得更广泛的支持之前，您需要使用JavaScript来实现这一点。在Firefox中查看以了解其工作原理。
<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>

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