Question

I’m trying to do a menu that moves up and down when I move the scroll. I’m close to it but when it moves it jumps a bit, the movement of the menu (div right) is not smooth. Anyone knows how to improve it?

(Of course it should not move horizontally and could not overlap the content on the left. Please see the example live here:http://jsfiddle.net/67ZFe/)

THE JQUERY:

$(function(){

    $(document).scroll(function(){
        var windowTop = $(window).scrollTop();
        $('#right').css('margin-top', (windowTop)  + 'px'); 
    });

})

THE CSS:

body {background-color: #f2f2f2;font-size: 13px;margin: 0;padding: 0;}
#wrapper {position: relative; margin:0 auto;width:700px;height:900px;background-color:#fff;}
#right {
    position: absolute;
    top: 40px;
    right:0px;
    width:200px;
    height:200px;
    background-color: red;
}
#text {
    position: absolute;
    left: 0px;
    width:400px;
    padding:40px;
}

THE HTML:

<div id="wrapper">
  <div id="text"> </div>
  <div id="right"> </div>
</div>

I have an example here: http://jsfiddle.net/67ZFe/

Answer 1

It may be better, and faster, to do this with a position:fixed; css attribute rather than with jQuery.