jquery/jquery-mobile — Issue #3530: [feature request] Persistent header 
Author: wizztjh
Created: 2012-02-03 07:55:27+00:00
State: open

i am looking at the code below to achieve that , am I on the right direction? Any suggestion for me?

$( document ).delegate( ".ui-page", "pagebeforeshow", function( event, ui ) {
var page = $( event.target ),
footer = page.find( ":jqmData(role='footer')" ),
id = footer.data( "id" ),
prevPage = ui.prevPage,
prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" ),
prevFooterMatches = prevFooter.length && prevFooter.jqmData( "id" ) === id;

if ( id && prevFooterMatches ) {
stickyFooter = footer;
setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );
}
})
.delegate( ".ui-page", "pageshow", function( event, ui ) {
var $this = $( this );

if ( stickyFooter && stickyFooter.length ) {
setTimeout(function() {
setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) );
stickyFooter = null;
}, 500);
}

$.mobile.fixedToolbars.show( true, this );
});