Making a div scroll causes it to jitter

Question

The problem that I'm trying to resolve can be seen here: http://jsfiddle.net/AAyLj/14/

Basically, when I scroll the papa div, the boy div is supposed to move up/down. This is working fine but there is a bit of a jitter on the boy div. This is because (I think) the js isn't being processed fast enough. On a powerful Mac, this doesn't happen - but it happens on PC's.

Is there a way to overcome this jitter with js or css? Thanks.

UPDATE:

I cannot use fixed position because there are other elements on the page (not shown in the jsfiddle) that will skew the look if I keep the boy div as position:fixed.

Answer 1

As karthikr is saying, you should probably use the CSS position: fixed . If that is not what you want, you could use the animate function. It gives a nice small delay to it.

See the jsFiddle to see what I mean.

Answer 2

Let's try with this css, no js necessary. http://jsfiddle.net/AAyLj/27/

.papa {
    min-height: 500px;
    height: 500px;
    background-color: yellow;
    position: relative;
    top: 200px;    
    overflow: scroll;
    width: 100%;
    padding-top:10px;
}
.boy {
    height: 200px;
    min-height: 200px;
    background-color: gray;
    position: fixed;
    margin-top: 200px;    
    width: 70%;
    float:left;
}

.girl {
    height: 800px;
    min-height: 800px;
    background-color: red;
    position: relative;
    width: 30%;
    float: right;
}
​