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 di

Answer 1

$.mobile.fixedToolbars.setTouchToggleEnabled(false) didn't work for me but editing the javascript-jquery.mobile.iscroll file as follows seems to solve the problem with the iscroll solution proposed by Satch3000 and queried by user418775.

changing the line (99) ...

if ($.mobile.activePage.data("iscroll") == "enable") {

to...

if (($.mobile.activePage) && ($.mobile.activePage.data("iscroll") == "enable")) {

Answer 2

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 3

I'm french Sorry for my english;

I fix this probleme with this code but it's not perfect (must be adapted to your situation):

$("body").live('scrollstart', function (event, ui) {
    if ($(".divDel").length == 0) {
        //prevents the offset
        var taill = $("[data-role=header]").height();
        $("[data-role=header]").after("<div class='divDel' style='height:" + taill + "px;'></div>");
        $("[data-position=fixed]").css("display", "none");
    }
}).live('vmouseup scrollstop', function (event, ui) {
    $(".divDel").remove();
    $("[data-position=fixed]").css("display", "block");
});
$.mobile.fixedToolbars.setTouchToggleEnabled(false);

Answer 4

It's very simple.

   <div data-role="header" data-position="fixed" data-tap-toggle="false">
    </div>

It works for me.

Answer 5

<div data-role="footer" data-tap-toggle="false"
     data-theme="c" id="footer" data-position="bottom" >
    <h4 align="center" >copyright 2012 @KoshWTF</h4>
    <p>&nbsp;</p>
</div> 

P.S you can do that for the header as well if you got any problems with it as well. cheers

Answer 6

I was having the same issue, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

#element {
    position: fixed;
    ...
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}