CODEWITHSUNDEEP
jqueryjquery-animatescrollto
Talasan Nicholson
Talasan Nicholson

Reputation: 19

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 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?

Upvotes: 2

Views: 195

Answers (2)

Teodor Talov
Teodor Talov

Reputation: 1943

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

Good luck.

Upvotes: 0

alex
alex

Reputation: 490433

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.

Upvotes: 1

Related Questions