Geek Answers Handbook

How to "fix" the position of the header footer using jquery mobile with data position = "fixed",

I use jquery mobile, and for the header / footer I use data-position = "fixed".

However, when we scroll the page ... the header footer disappears and reappears when scrolling. Is there a way that we could just capture the show on the screen all the time when you scroll?

I can only think about how to apply a fixed position and not use jquerymobile for these elements.

+4
source share
2 answers

I struggled to get this to work. If you want, you can remove 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 had without locks to prevent windows from disappearing. However, I believe that JQM only recounts the position of the header and footer elements after scrolling.

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

.ui-fixed-inline {opacity: 1! important; ! Display: unit is important; -webkit-animation name: no matter ;! } .fade.in, .fade.out {opacity: 1! important; -webkit-animation name: no matter ;! ! Display: unit is important; }

I know this is not what you want, but it speeds up the appearance of header and footer elements (this looks a bit choppy.) If you don't want to rewrite jQuery JQM that controls the positioning of the header and footer, I don’t think there is a simple a way to do this because the fixed-position JQM code is built to be reinstalled after the user scrolls. I will continue to search and edit this answer if I find a way.

+2
source

A simple version of Chase code works great for me:

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


Note that the touch toolbars use the same fade property to hide, so the following is required:

 $.mobile.fixedToolbars.setTouchToggleEnabled false # coffeescript
0
source

More articles:


All Articles