Home:ALL Converter>jQuery position altering for sticky headers

jQuery position altering for sticky headers

Ask Time:2012-09-22T00:21:20         Author:Walrus

Json Formatter

The following is a little script that simulates the sticky header effect seen on iOS devices.

$('.scrolllist').scroll(function(){
        $(this).find('ul').each(function(){
            if($(this).position().top <= 0){
                $(this).addClass('abs').find('strong').removeClass('mov');

                if($(this).position().top <= ($(this).height() * -1)){
                    $(this).removeClass('abs');
                    $(this).find('strong').addClass('mov');            
                }
                else {
                    $(this).addClass('abs');
                    $(this).find('strong').removeClass('mov');   
                }
            }
            else {
                $(this).removeClass('abs').find('strong').removeClass('mov');
            }
        });
    });

It changes the position of each element by changing its status from postion:absolute, top:0 to position:absolute, bottom:0; whilst also changing the containing <ul> from position:relative to position:static

SAMPLE: http://jsfiddle.net/dMJqj/80/

Is there anything that can be done to smoothen it up a bit. It looks a bit jerky on Chrome and Firefox and sometimes it can take a fraction of a second to trigger which is noticeable because the sticky header appears to flash.

Author:Walrus,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/12534327/jquery-position-altering-for-sticky-headers
yy