How to prevent div from being scrolled off top on iOS

Question

I am essentially trying to make this work on iOS: http://jsfiddle.net/xtyus/1/

Scrolling should result in the divs stacking at the top.

$(window).scroll(function(){
    /* get the current scroll position */
    var st = $(window).scrollTop();

    /* change classes based on section positions */
    if (st >= d1orgtop) {
        d1.addClass('latched');
    } else {
        d1.removeClass('latched');
    }
    if (st >= d2orgtop) {
        d2.addClass('latched');
    } else {
        d2.removeClass('latched');
    }
    if (st >= d3orgtop) {
        d3.addClass('latched');
    } else {
        d3.removeClass('latched');
    }
    if (st >= d4orgtop) {
        d4.addClass('latched');
    } else {
        d4.removeClass('latched');
    }
});

The problem is that on iOS, DOM manipulation is frozen during the scroll event (according to iOS Javascript DOM "Freezing?"). Which means that setting position as fixed (by adding the "latched" class) doesn't occur until after the user stops scrolling. This causes unwanted behavior on iOS. The div basically gets scrolled off the top, and then it jumps back down once the latched class is added.

Is there a good workaround for this problem?