scroll div over another div

Question

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!

Answer 1

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.

Answer 2

This is parallax scrolling, and there a lot of good libraries to help you out. I've used these before and they work well:

Skrollr - https://github.com/Prinzhorn/skrollr

Parallax.js - http://stolksdorf.github.io/Parallaxjs/

Answer 3

This is called Parallax effect scrolling. This involves a lot of things to make it work. check out the resources for the same. The best one I found which is much similar to the website reference that you have provided.

Hope this helps.

Answer 4

Check jParallax with jQuery : http://stephband.info/jparallax/

Answer 5

There is a much simpler way. I found it on W3Schools. The important part is to add background-attachment: fixed. The full CSS looks like this:

.banner {
    background-image: url("foo.jpg");
    min-height: 500px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}