jQuery fixed columns when column bottom is reached

Question

I'm trying to develop a script to avoid large white spaces when columns don't have the same height. To do this, I would like to put smaller columns in position fixed when the scroll position reaches the bottom of a smaller column. Whenever the scroll position is back under the column height, the column should regain its initial property.

Example: Column 1 has a height of 1000px Column 2 has a height of 800px Column 3 has a height of 1600px If I don't do anything, by the time I reach the bottom of column 3, I will only see white spaces in column 1 and 2.

So the idea is to put column 1 in position fixed as soon as the scrolling position exceeds 1000 px, same for column 2 when it exceeds 800px. If I go back to the top of the page, those fixed properties should be remove.

If you have any suggestion of an existing script, I'm all in ! :)

Here is how I tried to proceed:

1. Identify all columns that start at the same height and add an attribute called "group" and assign a value to it in case there are multiple sets of columns on the page:

   ...

2. Store all initial left position, top position, bottom position as specific attributes and I end up with something like:

   ...

3. Whenever the scrolling position exceed the "b" value, I put the column in position:fixed which extracts it out of the flow so I have to reposition the other columns as well based on the w,h and b values set in the previous step.

4. Whenever the scolling position goes back under the b value, I reinstate all initial parameters. Here is the code:

     $(window).scroll(function() 
       { 
           $('[group]').each(function(i, obj) 
               {
                   screenheight = $(window).height();
                   scrollposition = $(window).scrollTop()+screenheight;
                   tempbottom = $(this).attr('b');
                   templeft = $(this).attr('l');
                   tempwidth = $(this).attr('w');
   
                   if (scrollposition>tempbottom)
                       {
                           console.log('w'+tempwidth);
                           $(this).css('position','fixed');
                           $(this).css('width',tempwidth+'px');
                       }
                   else
                       {
                           $(this).css('position','relative');
                       }
                   $(this).css('left',templeft+'px');  
               });             
   
       });
   

The script does what I expect it to do except that the width of my columns is not respected at all.

Example: column 1 has an initial width of 300px, I see w=300 in my attributes and I set the width with the code above. Results, the column ends up with 330 pixels and blows completely the page.

Same issue for all columns...Why are those pixels being added? I really don't see where the problem is.

Thanks Laurent