javascript - ページの上部で div を停止し、それらをスクロールする JavaScript

Question

ここで動作するコードの一部があります: http://jsfiddle.net/Tgm6Y/4302/

これはjqueryのスニップです：

    (function(window){
$.fn.stopAtTop= function () {
    var $this = this,
        $window = $(window),
        thisPos = $this.offset().top,
        //thisPreservedTop = $this.css("top"),
        setPosition,
        under,
        over;

    under = function(){
        if ($window.scrollTop() < thisPos) {
            $this.css({
                position: 'absolute',
                top: ""
            });
            setPosition = over;
        }
    };

    over = function(){
        if (!($window.scrollTop() < thisPos)){
            $this.css({
                position: 'fixed',
                top: 0
            });
            setPosition = under;
        }
    };

    setPosition = over;

    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });

    $window.scroll(function(){setPosition();});
    setPosition();
};
})(window);

$('#one').stopAtTop();
$('#two').stopAtTop();
$('#three').stopAtTop();
$('#four').stopAtTop();

しかし、私が理解できないのは、表示可能な領域よりも大きい場合にdivをスクロールし、下部に達したらその下のdivをスクロールし始める方法です。

たとえば、上のページの #one では、hello は表示されますが、最後の 2 つのフレーズ (End、Start Scrolling) は表示されません。CSS を再調整して 100% にならないようにしましたが、それでもこの問題は解決しません。

JavaScript/Jquery では、div 内のすべてのデータが表示されるまでその下の div をスクロールしない方法を見つけてから、上にスクロールして同じことを行う必要があります。どんな助けでも大歓迎です。

ありがとう、