Question

enter image description here

我有一个iPad框架，想要在它后面放一个更大的图像（页面内容），滚动时向下滚动。我的css比这里的小提琴https://jsfiddle.net/vk0jk37v/中的例子更复杂，但我似乎无法让这个工作。

在我的真实网页中，我想要正常向下滚动，直到我看到此图像，然后我希望滚动效果在此图像中显示“页面内容”。在我希望允许用户在图像的“页面内容”结束后正常滚动之后。

编辑：我已经更新了小提琴并且它粗糙但基本上我正在寻找的东西，除非我将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

确定。我试图修复你的小提琴，但最后我改变了太多。

如果我想做你的项目，我会解释想做什么。（希望如果我已经足够了解你的问题）。

首先，我会将ipad的图像定位在position:fixed和负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>

现在我们只关注底层内容的顶级内容。为此，我们只需在第一个内容中添加一个大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图像，但是在你未来的项目中，你很难找到你的第一个内容的真实高度，只需要用chrome或simillar来检查它。与我补充的大幅度相同。

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

这里有最终的 FIDDLE

允许在另一个div

1 个答案: