Scroll page to a certain point then start scrolling a div's overflow content using only one scrollbar

Question

I'm after some information on how to make the page's scroll bar scroll the overflow content of a div instead of the page once its scrolled to a certain point.

The end outcome is to scroll the page to the extent that the header isn't visible anymore, but from that point forward scroll the contents of the div - with the main scrollbar, not two nested scrollbars.

If the user scrolls back up, so that the div contents are all the way at the top again, the page should resume scroll and show the header again.

Answer 1

You can do it using the scrollTop property of your elements. First you'd need to determine where your header ended (the point to scroll your window to):

var header = $('#header');
var headerBottom = header.offset().top + header.height();

Then you could animate your window's scrollbar to this position:

$(window).animate({scrollTop: headerBottom});

Once that was taken care of, you would then get a reference to whichever element you wanted to then scroll by and animate its scrollTop position (same code as snippet above that scrolls the window).

Finally you would need a scroll event handler so you could determine when it was time to change which element you were scrolling the content by:

$(window).scroll(function(){
    // logic to determine which element should be scrolling
});