jQuery Mobile change pages without animating header and footer

Question

I have a jQuery Mobile set up using multiple page files that animate, slide, when a link is pressed or an event is triggered. That works great, but when the page slides in and out, the header and footer slide too, even though they stay the same.

I know I can override the page changes and just swap out .ui-content but that causes other issues and requires me to redo a lot of my code.

Is there a way to keep the page changing, and page change animations but have the header and footer elements instantly change without the animation?

My code is fairly simple,

As requested, here is some of my code:

<!--login page-->
<div data-role="page" id="login" data-dom-cache="true" data-theme="a">
        <div data-role="header"  data-tap-toggle="false" data-position="fixed" data-id="header">
            <h1>Mastrack</h1>
        </div>
        <div class="ui-content">
            <form id="loginForm">
                <input type="text" name="username" placeholder="Username">
                <input type="password" name="password" placeholder="Password">
                <input type="submit" value="Sign In">
                <div class="ui-grid-a">
                    <div class="ui-block-a"><label><input type="checkbox" name="remember" data-mini="true">Remember me?</label></div>
                    <div class="ui-block-b"><a href="#" data-role="button" data-mini="true" id="forgotPWD">Forgot Password?</a></div>
                </div>
            </form>
        </div>
        <div data-role="popup" id="loginMessage" data-transition="pop"><p></p></div>
        <div data-role="popup" id="forgotMessage" data-transition="pop" style="padding:0px 8px;">
        <form id="forgotForm">
            <input type="text" placeholder="Username or E-mail">
            <input type="submit" data-theme="b" value="Get New Password">
        </form>
    </div>
</div>

That is the login page to my site. The next page it loads is

<div data-role="page" data-dom-cache="true" id="welcome" data-theme="a">
        <div data-role="header" data-tap-toggle="false" data-position="fixed" data-id="header">
            <h1>Mastrack</h1>
        </div>
        <div class="ui-content">
            Welcome <span id="custName"></span>,<br>
            <p id="messages">

            </p>
        </div>
        <div data-role="footer" data-tap-toggle="false" data-position="fixed" data-theme="b" data-id="footer">
            <div data-role="navbar" data-iconpos="notext">
                <ul>
                    <a href="#settings" class="navigation" data-icon="gear" data-transition="slide">Settings</a>
                    <a href="#devices" class="navigation" data-icon="location" data-transition="slide">Devices</a>
                    <a href="#alerts" class="navigation" data-icon="alert" data-transition="slide">Alerts</a>
                    <a href="#reports" class="navigation" data-icon="info" data-transition="slide">Reports</a>
                </ul>
            </div>
        </div>
    </div>

Answer 1

Yes there is, give header and footer data-id attribute, and make it the same, something like:

data-id="fixed"

Working example: http://jsfiddle.net/Gajotres/JB22E/6/

HTML:

<div data-role="page" id="article1">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
        <h1>Articles 1</h1>
    </div>
    <div data-role="content">
        <p>Article 1</p>
        <a data-role="button" id="add-dynamic-page">Add new dynamic page</a>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
        <h1>Footer</h1>    
    </div>
</div>

This is my old example, made for somthing complete else but you can use it to see how it works. As you can see header and footer have data-id attribute. Delete them and see what will happen.

Answer 2

While Gajotres answer is partly correct, I ended up using a different solution.

In jQueryMobile 1.4.2 it seems that the data-id method for fixed navigation is not the preferable way of doing this. Instead I followed this guide from the jQueryMobile demos to create the effect. I placed my header and footer outside of the main page element and excluded headers and footers from other pages and dynamically changed the content as needed with jQuery.