Navbar not fixed while transition jquery mobile

Question

I'm new to jquery mobile. i was implementing navbar while navigating from one page to other through navbar buttons. Navbar is also sliding where as in ios navbar sticks at bottom and view slide. How to remove this error

<div data-role="footer" data-position="fixed">      
            <div data-role="navbar" data-iconpos="top">
                <ul>
                    <li><a href="#" data-icon="comment" class="ui-btn-active ui-state-persist">Message</a></li>
                    <li><a href="profile.html" data-transition="slide"  style="text-decoration:none" data-icon="gear">Settings</a></li>
                    <li><a href="#" data-icon="cloud">Share</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->

Now on clicking on profile navbar also slides.

Answer 1

your need add data-position="fixed", add style data-id="foo" in header tag, and then only add class="ui-btn-active ui-state-persist" to ative link.

see reference: http://demos.jquerymobile.com/1.1.0/docs/toolbars/footer-persist-d.html