在另一个div上滚动div [英] scroll div over another div

问题描述

我有两个高度为100％的div。
当你滚动时，我希望第二个div在其他卷轴上滚动，而不是第一个卷动。

喜欢这个网站： http://www.endzeit-ausstellung.de/

我在Firebug看过，但是我找不到解决方案，有人可以帮我吗？

非常感谢！

解决方案

你不需要jquery插件来完成这个滚动效果。你只需要一些CSS;）

快速和肮脏的例子在这里：

HTML

 < div id =wrapper> 
< div id =aclass =panels> FIXED PANEL< / div> 
< div id =bclass =panels> Scrolling-Panel 1< / div> 
< div id =cclass =panels> Scrolling-Panel 2< / div> 
< div id =dclass =panels> Scrolling-Panel 3< / div> 
< / div> 
  

CSS

  //重设body和html的边距和填充值
 html，body {
 padding：0; 
保证金：0; 
背景：黑色; 
} 
 
 //允许我们将所有面板缩放到全宽和高度
 #wrapper {
 position：absolute; 
身高：100％; 
宽度：100％; 
} 
 
 //使所有面板满页
 .panels {
 position：relative; 
身高：100％; 
最低身高：100％; 
宽度：100％; 
 z-index：1000; 
} 
 
 //这是固定的第一个面板
 #a {
 background：#eee; 
位置：固定; 
颜色：红色; 
 top：0; 
剩下：0; 
 / *防止您的固定面板位于后续面板之上* / 
 z-index：-99; 
} 
 
 //第二个面板 - >在第一块固定面板
 //应该获得100％的顶部保证金之后，就是这样一个技巧：
 #b {
 margin-top：100％; 
背景：黄色; 
} 
 
 #c {
 background：pink; 
} 
 
 #d {
 background：green; 
} 
  

演示在这里：

jsfiddle示例

顺便说一句：我已经做了终点-ausstellung.de网站。

I have two div with a height of 100%. And when you scroll, I want that the second div over the other scrolls, without scrolling the first up.

Like on this site: http://www.endzeit-ausstellung.de/

I looked in Firebug, but I can't find the solution there, can anybody help me?

Much thanks in advance!

解决方案

you dont need jquery plugins to do this „scrolling-effect". you just need some css ;)

quick and dirty example here:

HTML

<div id="wrapper">
<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>
</div>

CSS

// reset margin and padding of body and html
    html,body {
       padding:0;
       margin:0;
       background:black;
    }

    // allows us to scale all panels inside to full width and height
    #wrapper { 
        position:absolute;
        height:100%;
        width:100%;
    }

     // make all panels fullpage  
    .panels { 
        position:relative;
        height:100%;
        min-height:100%;
        width:100%;
        z-index:1000;
    }

    // this is the fixed first panel 
    #a{ 
        background:#eee;
        position:fixed;
        color:red;
        top:0;
        left:0;
        /* prevents your fixed panel from being on top of your subsequent panels */
        z-index: -99; 
    }

    // the second panel -> after the first fixed panel
    // should get 100% top margin, thats the trick
    #b{ 
       margin-top:100%;
       background:yellow;
    }

    #c{
       background:pink;
    }

    #d{
       background:green;
    }

demo here:

jsfiddle Example

btw: i've made the endzeit-ausstellung.de site.

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