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 can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
To set the scroll position of an element (the other div ), you set the element's scrollTop and scrollLeft values (which are in pixels). If you want two divs to scroll in near-unison, for instance, you'd assign the source div's scrollTop and scrollLeft to the target div .
Use position:absolute; and set the "popup" one to be positioned within the boundaries of the other. The "popup" div should likely also be smaller. Use z-index to stack the "popup" one above the other one (give it a higher value for z-index ).
You need to set relative positioning on the container and then absolute on the inner tag div. The inner tag's absolute positioning will be with respect to the outer relatively positioned div. You don't even need the z-index rule on the tag div. Show activity on this post.
you dont need jquery plugins to do this „scrolling-effect“. you just need some css ;)
quick and dirty example here:
<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>
// 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With