Change Div Y Position with mouse wheel and sidebar

Question

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({ marginTop: "-=50px",}, 'slow', "easeOutCirc" );

        }
    });
    });

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

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

});

Thanks

Answer 1

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;