允许div设置在另一个div后面的滚动 [英] allow scroll of div set behind another div

问题描述

>

一个iPad框架，并想要有一个更大的图像（页面内容），滚动下来，滚动。我的css比这个例子更复杂，在这里 https://jsfiddle.net/vk0jk37v/ 但是我似乎得不到这个工作。

I have a iPad frame and want to have a larger image behind it (the page content) that scrolls down as you scroll. My css is more complicated then the example in the fiddle here https://jsfiddle.net/vk0jk37v/ but I cant seem to get even this to work.

在我的真实网页中我想正常滚动，直到我得到这个图像，然后我想滚动来实现这个图像中的页面内容。在我想允许用户在图像的页面内容结束后继续正常滚动。

in my real webpage I want to scroll down normally until I get to this image, then I want the scroll to effect the "page content" in this image. After I want to allow the user to continue scrolling normally after the "page content" of the image ends.

编辑：我已经更新了小提琴和它粗糙但基本上我正在寻找除了当我设置iPad框架在图像顶部我不能获取内容滚动。我需要它的原因是保持图像在一起调整窗口时，覆盖固定导航或黑色侧线的大小。任何想法呢？并感谢Felk在正确方向的提示

I have updated the fiddle and it rough but essentially what I am looking for except when I set the iPad frame to be on top of the image I am unable to get the content to scroll. the reason I need it under is to keep the image together when resizing the window with out covering the "fixed nav" or black side lines. Any thoughts on this? and thank you Felk for the hint in the right direction

Edit2：附加的图像是我应用此图像的上下文。

the image attached is the context in which I am applying this.

example html

example 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>

example css

example 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;
}

推荐答案

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

Ok. I was trying to fix your fiddle but at the end I have changed too much.

我会解释一下，如果我想做你的项目，我会做什么。

I will explain thought what I would do if I wanted to do your project. (hopefully if I have understood your question well enough).

首先我将使用位置来定位ipad的图像在背景中：固定和负数 z-index 。现在我们有图像不移动，因为位置相对于窗口而不是任何元素放置。

First at all I would position the image of the ipad at the background with position:fixed and negative z-index. Now we have the image NOT moving at all as the position is placed relative to the window and not to any element. And also we have the first part of your content over the image and scrolling nicely.

然后我们专注于html元素在滚动时的正确流程，所以基本上会有更多的内容下的第一（和以后的图像）。我添加了另一个具有红色背景的div来更好地说明问题。

Then we focus on the right flow of the html elements when scrolling so basically there will be more content under the first (and later under the image). I have added another div with red background to illustrate better the problem.

html看起来像这样：

The html would look something like this:

<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 。现在滚动一次，到达第一个内容的结尾，图像在背景将显示，然后在页边距结束后，最后的内容将开始流过图像（这是你不想要的）

Now we focus just on separate the top content from the bottom content. To do this we just add a big margin-bottom to the first content. Now when scrolling once you reach the end of the first content the image at the background will show then after the margin is over the last content will start flowing over the image (which is what you don't want)

基本上我们有： FIDDLE1 strong>

basically we have this: FIDDLE1

现在是时候做一个非常简单的jquery（如果我可以使用它总是很简单）。我们只需要给浏览器一些命令，所以我使用这个：

Now it's just time to do a very simple jquery (it's always simple if I can use it). We just need to give some orders to the browser so I have used this:

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

基本上我告诉浏览器当滚动高于1227px类框架和另一个外，如果你向后滚动删除类。

basically I'm telling the browser that when the scroll is higher than 1227px (height) to add a class to frame and another to outer and if you scroll back to remove the classes.

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

Then The class I add to outer will just remove the big margin between first and last divs while the class add to frame will just make the container of the image relative so the flow of the html is normal and the image will keep scrolling down with the rest of elements.

当然，我选择的1227px是基于你提供的jsfiddle图像，但在你未来的项目，它不会太难找到你的第一个内容的真正的高度，只是考虑它与chrome或simillar。

Of course the 1227px I choose is based on the jsfiddle images you provided but in your future projects it won't be too hard to find the real height of your first content justinpecting it with chrome or simillar. same with the big margin I added.

其余的更改是使大小正确，并将窗口中的所有元素放在宽度为600px的位置。

The rest of changes was to make the sizes correct and center all elements in the window with at 600px width.

这里您有最后的 FIDDLE

Here you have the final FIDDLE

这篇关于允许div设置在另一个div后面的滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！