JQuery Mobile Fixed Toolbar and Footer Bar disappears?

Question

I am using JQuery Mobile version 4.1a and using:

data-position="fixed"

on both header and footer.

When I scroll the content it disappears and then appears again.

Is there any way to make it stay in it's position and not disappear everytime I scroll the page?

Thanks

Answer 1

Add data-tap-toggle="false" to the element

or

Add this to Javascript

$("[data-role=header]").toolbar({ tapToggle: false });

Older versions of jQuery use .fixedtoolbar().

jQuery Mobile Docs - Events

Answer 2

I had problems with jquery mobile iscroll in my project. Perhaps some of the libraries I was using were interfering with each other (I am using knockout and jquery.templates along with a bunch of other things). A solution that worked for me was the jquery mobile scrollview. Demos can be viewed here.

http://jquerymobile.com/test/experiments/scrollview/

And the code is here

https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/

you need to include

• jquery.easing.1.3.js
• jquery.mobile.scrollview.js
• jquery.mobile.scrollview.css
• scrollview.js

I've used this recently on a jquery mobile project and it works really well on iphone 3gs. On my old android HTC magi, it doesn't work that well but none of jquery mobile works well on that device. Note that the scrollview is under experiments and has not been added to the main jquery mobile project.

If you have no luck with iScroll or jquery mobile scrollview, the wink toolkit is another option.

http://www.winktoolkit.org/tutorials/119/

Like iScroll, I was not able to get this to work with my particular project but I don't think I really tried that hard.