Scrolling div contained in a div with jQuery?

I need to create a scrolling div (a div that floats alongside with you as you scroll down the page) but I need to constrain it 开发者_JAVA百科inside the parent.

I need this so that I may do it in multiple divs, so that as the user scrolls down the information doesn't get lost. So far I've been trying to do the relative and absolute method (where the parent has a relative position, and the child has an absolute) but it overflows and I'm not sure where to go from here.

$(window).scroll(function() {
        $('.item_info').css('top', $(this).scrollTop() + "px");
    });

Not sure how to restrain it. Any help?

Add a condition such as...

var parent =  $('.item_info').parent();

if (window.scrollTop
    >= parent.attr('scrollTop') + parent.attr('scrollHeight')) {
   return;
}

This is obviously sample code, adjust it to suit your requirements.

Have you tried http://plugins.jquery.com/project/stickyfloat This is jQuery plugin, see if it does what you need.

Good luck.