jQuery mobile: change text header/footer remove fixed property

Question

Here's the working stuff: working sample Try to scroll: it works, the header and footer are fixed.

Now, click on any cell of the table and scroll: the header and footer are not fixed anymore whereas I'm just changing the text in it:

$('.header h1').html(txt);
$('.footer h4').html(txt);

I'm generating a table and when the user clicks on a cell, header and footer are modified. Here's my script here:

var cellClick = function() {
    var txt=
        '"'+$(this).html()+'" = '+
        $(this).attr('data-unicode');
    $('.header h1').html(txt);
    $('.footer h4').html(txt);
};

After googling a lot - and watching results here, I haven't found a "working workaround".

Answer 1

jQuery Mobile's toolbars get hidden once tapped on screen. To prevent then from hiding on tap, add data-tap-toggle="false" attribute to both divs.

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

<div data-role="footer" data-tap-toggle="false">
</div>