Change Div Y Position with mouse wheel and sidebar

I need that when I scroll down or up with mouse wheel or sidebar my div change incrementally the Y position (for example 50px up or down ). I need this in Javascript/Jquery.

I Try this code, but only works for scrolling down(The Scrolling Down and Up Function is working well, only the animate part is working wrong):

UPDATE:

 var sidebarScrollTop = 0;

    $(document).ready(function() {

    sidebarScrollTop = $("body").offset();
    $(window).scroll(function () 
    { 
        var docScrollTop = $('body,html').scrollTop();
        if(docScrollTop > sidebarScrollTop.top)
        {


        $("#legend").stop().animate({ marginTop: "+=50px",}, 'slow', "easeOutCirc" );
        }
        else
        {
        $("#legend").stop().animate({开发者_如何学C marginTop: "-=50px",}, 'slow', "easeOutCirc" );

        }
    });
    });

    $(window).resize(function() 
    {
    sidebarScrollTop = $("#legend").offset().top;
    });

    $(document).resize(function() 
    {
    sidebarScrollTop = $("#legend").offset().top;

});

Thanks

You can use

$(window).scroll(function() {
   // Your scroll code here
});

to grab whenever the user is scrolling on the page.

Next you want to change the div's y-value. If the div is positioned absolute, this is just changing its top-value.

$('my-div').top = original-top-value + $(window).pageYOffset;

I believe you need is to keep the div always showing even when user scrolls down. If that is the case then it can be done with only CSS:

div {
  position: fixed;
  z-index: 100;
  top: 100px;
  left: 100px;
}

The values of z-index, top and left are dummy values. Change em with your ones.

UPDATE:

Since CSS Solution won't work for you, here is a working example writter in JS: http://jsfiddle.net/qCtt5/