Using jQuery, scroll a div's content's with the browser scrollbar without scrolling the page...

I have a header area that is 575px high. I'd like the contents of this header div to scroll when the user moves the scrollbar or uses the mousewheel, but when the开发者_如何学Python scrollbar reaches the end of that content, I need the entire window to start scrolling like normal.

Really Basic Sample Code:

<div id="header">

    <div id="text1">ONE</div>
    <div id="text2">TWO</div>
    <div id="text3">THREE</div>
    <div id="text4">FOUR</div>

</div>

<div id="main-content"></div>

I have JSfiddle set up here: http://jsfiddle.net/3uefZ/5/

There are scrollbars on the header div - which I do not want :( but it's the only way could get close to visualizing what I mean.

I'd love any help on this...

Thanks!

This may work:

http://jsfiddle.net/BbGdM/

var i = document.body.scrollTop;
var scrolling = true;
window.onscroll = function(){
    if(scrolling) {
        var old = document.getElementById("header").scrollTop
        document.getElementById("header").scrollTop += document.body.scrollTop;
        if( document.getElementById("header").scrollTop == old &&
            document.body.scrollTop > 0) {
            scrolling = false;
        }
        document.body.scrollTop = 0;
    }
}

rather hackish though... I so hope this is not a new breed of ads......