Movable div on scroll

Question

<div id="blue">
    <div id="red"></div>
</div>

I want this red div to move inside the blue div on scroll.

It shouldn't never can exit of the blue div.

There is the code: http://jsfiddle.net/zhQZt/2/

I hope you understand what I mean...

Answer 1

You can achieve this with some clever positioning and the z-index to make it appear like the red div is contained within the blue div. A new div has been added with a higher z-index value then the red box, and a background color to hide the red box when it overflows.

New CSS:

#continue {
 background:white;
position:relative;
 z-index:2;
height:100%;
 width: 200px;

}
#blue {
    height:300px;
    width:200px;
    background:blue;

position:relative
}

#red {
    height:50px;
    width:200px;
    position:fixed;
    background:red;
    overflow:hidden;
    z-index:1;
}​

New HTML:

<div id="blue">
<div id="red">
</div>
</div>
<div id="continue">
<!--Your line breaks -->
</div>​

See the jsfiddle for the working example: http://jsfiddle.net/zhQZt/5/

Answer 2

The CSS code you are looking for is overflow: scroll;, explained here: http://www.w3schools.com/cssref/pr_pos_overflow.asp.

#blue {
    height:300px;
    width:200px;
    background:blue;
    overflow: scroll;
}

#red {
    height:50px;
    width:250px;
    background:red;
}

http://jsfiddle.net/zhQZt/2/