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.

            if($(this).position().top <= 0){

                if($(this).position().top <= ($(this).height() * -1)){
                else {
            else {

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