Skip to content

JQuery Mobile – maintaining the top bar fixed with Panel

May 1, 2013

Having discovered the changepage event in Jquery Mobile, this had resolved a problem you may encounter with any top bar navigation bar to be fixed besides the home page with a Panel.

The problem is that for any other page than the home page or first page, the top bar navigation doesn’t stick to the top of the page, even though you set the top bar like so: –

    <div data-role=”header” id=”topbar” data-position=”fixed”>



with the Panel component.

This can be simple fixed with placing the changpage event handler inside the onclick event like so: –

    <div id=”menu” data-role=”panel” data-position-fixed=”true”>
        <nav id=”sidenav” class=””>
            <h3>HEADER HERE</h3>
                <li><a href=”#” onclick=”$.mobile.changePage(‘#page1’, { transition: ‘fade’} );”>Page 1</a></li>
                <li><a href=”#” onclick=”$.mobile.changePage(‘#page2’, { transition: ‘fade’} );”>Page 2 </a></li>
                <li><a href=”#” onclick=”$.mobile.changePage(‘#page3’, { transition: ‘fade’} );”>Page 3</a></li>
                <li><a href=”#” onclick=”$.mobile.changePage(‘#page4’, { transition: ‘fade’} );”>Page 4</a></li>


If you now set the extra pages #page1, #page2, #page3, and #page4, the top bar navigation should stay fixed at the top!


From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: