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...

score 0 · Answer 1 · answered Dec 24 '12 at 01:27

0

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/

answered Dec 24 '12 at 01:27

Phil Rykoff

11,999
3
39
63

Ok but then the red div doesn't move... It should move inside the blue div but without to exit. – vlady Dec 24 '12 at 01:30
Like here: http://www.webgeekly.com/tutorials/jquery/a-simple-guide-to-making-a-div-static-as-you-scroll-past-it/ But without css-position-absolute, if possible. – vlady Dec 24 '12 at 01:42
Why don't you just use position:relative instead? You obviously have to adapt the top, left, etc. properties to your design anyway. – Phil Rykoff Dec 24 '12 at 01:52

score 0 · Accepted Answer · answered Dec 24 '12 at 01:40

0

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/

answered Dec 24 '12 at 01:40

Omega

2,998
2
16
19

Yes, this is what I want :) But there's a small problem. The red div doesn't stop at the end of the blue div. Can you check this out please ? http://jsfiddle.net/GHduw/ – vlady Dec 24 '12 at 01:53
@vlady Great!. It's not supposed to, that's why we introduced the new "continue" div to hide the red div when it overflows you see.. – Omega Dec 24 '12 at 01:57
OK, I understand... So, I don't think this is a problem... Thanks :) – vlady Dec 24 '12 at 02:01

Movable div on scroll

2 Answers2