how to 'fix' the header footer position using jquery mobile with data-position=“fixed”

Question

i am using jquery mobile and for header/footer i am using data-position="fixed".

However, when we scroll the page... the header footer goes away ands reappear when scrolling stops.. Is there a way we could just make it fixed on the screen an show all the time you are scrolling ?

I can only think of a way is to apply position fixed and not use jquerymobile for these elements..

Answer 1

I tried my best to get this to work. If you want you can delete the function that changes the header and footer class from .ui-fixed-overlay to .ui-fixed-inline and remove the webkit animation from .fade.in and .fade.out, but I've had no lock preventing the windows from disappearing. However, I believe JQM only recalculates the position of the header and footer elements after you scroll.

I put the following css in page div to remove the webkit animation.

.ui-fixed-inline { opacity: 1!important; display:block!important; -webkit-animation-name:none!important; } .fade.in, .fade.out { opacity: 1!important; -webkit-animation-name:none!important; display:block!important; }

I know this is not what you want but it does speed up the reappearance of the header and footer elements (it looks a bit choppy.) Unless you want to rewrite the JQM javascript that controls the header and footer positioning, I don't think there is any easy way to do this as the JQM fixed position code is built to re-position after the user scrolls. I'll keep looking and edit this answer if I find a way.

Answer 2

A simpler version of Chase's code works fine for me:

/* sass - remove toolbar fade */
.nofade{
 &.in, &.out {
    -webkit-animation-name:none;
 }
}

Note that tap-to-hide toolbars uses this same fade property, so the following is required:

$.mobile.fixedToolbars.setTouchToggleEnabled false  # coffeescript