当浏览器滚动时，div标签在视图中浮动

Question

I was wondering how to make a div tag float within the screen when a user scrolls down or up on a browser?

For example: yelp.com : http://www.yelp.com/search?find_desc=&ns=1&find_loc=los+angeles%2Cca If you look at their map on the right side, it is fixed in a position but when you scroll down, the map will scroll with you.

Can someone help me?

Thank you!

Answer 1

var $sdiv = $("#mydiv");
$(window).scroll(function() {
    $sdiv.stop().animate({
        "marginTop": ($(window).scrollTop() + 50) + "px"
    }, "slow");
});

Check working example at http://jsfiddle.net/N7xqC/