在另一个div上滚动div

Question

我有两个高度为100%的div.当你滚动时,我希望第二个div超过其他滚动,而不是先滚动第一个.

就像在这个网站上:http://www.endzeit-ausstellung.de/

我看着Firebug,但我找不到那里的解决方案,有人可以帮帮我吗？

非常感谢提前!

Answer 1

你不需要jquery插件来做这个"滚动效果".你只需要一些CSS;)

这里快速而肮脏的例子:

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

在这里演示:

jsfiddle例子

顺便说一句:我已经制作了endzeit-ausstellung.de网站.

Answer 2

这称为Parallax效果滚动。要使其发挥作用，需要做很多事情。查看相同的资源。我发现的最好的一个与您提供的网站参考非常相似。

希望这可以帮助。