jQuery Forum

I'm very new in javascript and jquery, but I like the possibilities a lot!

I have a page with a div (id='wrapper')

Inside this wrapper div I have to divs (id='left'). One if floating to the left and the other is floating to the right (id='right').

The right div is not as high as the left one. So the right div will scroll down untill the bottom of div left.

Well the right div is scrolling very smooth down while i'm scrolling down. See code below.

2.     var $sidebar   = $("#right"), 
3.         $window    = $(window),
4.         offset     = $sidebar.offset(),
5.         topPadding = 15;
6. 
   
7.     $window.scroll(function() {
8.         if ($window.scrollTop() > offset.top) {
9.             $sidebar.stop().animate({
10.                 marginTop: $window.scrollTop() - offset.top + topPadding
11.             }, 400);
12.         } else {
13.             $sidebar.stop().animate({
14.                 marginTop: 0
15.             }, 400);
16.         }

But the problem is that I can keep on scrolling without stop and the right divs is coming with my sroll action. And that is the point I dont want. I want that when I scroll down to the bottom that div right will stop scrolling as well.

I tried so many things like:

- giving a max-height to the wrapper;

- giving a max-height to the body and html;

- tried many other code without success;

So i'm very wondering how I can solve this issue.

My result should be: 

I want that the scroll function/animation will stop when I reach the bottom of the div#wrapper or the bottom of div#left.

I hope someone can support me with this. I will be so thankful.

Greets Johnny