Question

jquery scrollToFixed stopped when it reached the very top of the page, and it just appears on top of the div that is suppose to be fixed at the very top.

Here is what I have so far.

var arr = new Array();
$('div[id^="post"]').each(function()
{
   // do something with it...
    var id = $(this).attr("id").slice(5);
    //alert(id);

    arr.push(id);

   $(this).css('background-color', 'green');
});

     for (i = 0; i < $('div[id^="post"]').length; i++) {
      //alert(arr[i+1]);

            $('#float-'+arr[i]).scrollToFixed({
        limit: $('#post-'+arr[i+1]).offset().top - $('#float-'+arr[i]).height()-220
    });
    }​

I am using the jquery scrollToFixed plugin.

I am trying to achieve the same effect on 9gag.com, scroll multiple sidebar divs down t he screen, I got the idea here.

When you scroll the page, the right div should become fixed until the end of the left div is reached, but for some reason, the right div become fixed at the very top of the page, I have the top(ad and navigation) div set to fixed all the time.

Answer 1

If I understand you correctly then what is happening is expected. The jQuery plugin (scrollToFixed) doesn’t know that you want the element positioned beneath another one so you’re going to have to do that yourself.

The easiest way is to give #float-63 (imo not a very good ID) a margin-top that equals the height of the element it should be positioned below. 70px seems to work fine.

The problem with this is that it will have 70px margin-top even when it’s not “fixed”. It doesn’t seem that the plugin adds any sort of class to the element when it goes fixed but that should be pretty easy to add if you know jQuery.

Then you can simply do #float-63.scroll-to-fixed {margin-top: 70px}