Floaty bars module, need improvement?

Question

Here is my attempt at a floaty Bar module, used in a mobile application. There are several "bars", which stick to the top of the browser window once they are passed. When the next bar is reached, it takes over that sticky position... Based on: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-css.html

CMBi.floatyBar = (function(){
    var dayGroups = [];

    function getPositions() {    
        var that = this;
        $.each( $('.day-group'), function(i, day) {
            if ($(this).length >= 1) {  
                // Add the initial starting Y position to the object
                this.initialYPosition = $(this).offset().top;
                that.dayGroups[i] = this;
            }
        });
    }

    function setPositionsOnScroll() {
        var _daygroups = dayGroups, that = this;

        if ( window.scrollY < _daygroups[0].initialYPosition) {
            this.restoreInitialPosition(_daygroups[0]);
        }       

        for ( var i = 0; i < _daygroups.length; i++ ) {
            // Get the next floaty bar position
            var _nextYposition = _daygroups[i+1] ? _daygroups[i+1].initialYPosition : config.vars.docHeight;
            // Between two bars, or betweem the last bar and the end of the doc
            if ( window.scrollY > _daygroups[i].initialYPosition && window.scrollY < _nextYposition) {
                // Stick the bar to the top
                that.setTop(_daygroups[i]); 
                // Restore initial positions of the other bars
                $.each(_daygroups, function(index, day) {
                    if (index !== i) {  
                        that.restoreInitialPosition(day);   
                    }               
                });                     
            }
        }
    }

    function setTop(element) { // Called when it's time for the floaty bar to move
        var _yPos = window.scrollY - element.initialYPosition;
        element.style['-webkit-transform'] = 'translateY(' + _yPos + 'px)';
    }

    function restoreInitialPosition(element) { // Called when the floaty bar is dismissed
        var _yPos = 0;
        element.style['-webkit-transform'] = 'translateY(' + _yPos + 'px)'; 
    }   

    return {
        init : getPositions,        
        setPositions : setPositionsOnScroll
    };

}());

Answer 1

What I tend to do in these situations is have two states for the floaty thing:

1. When it's not in "stay on the page" mode, it has position:relative.
2. When the page is scrolled down enough, it gets position:fixed and stays on the page.

It is not animation intensive at all, it's more like the way gmail used to be before the recent changes. You only change the element's style when the page scrolls up or down past a certain point, but most scroll events you just ignore.