Skip to content

How to make the top bar in JQuery Mobile FIXED

April 24, 2013

Here is two ways in how to make a top bar navigation bar in JQuery mlobile fixed so whenever you scroll down, the top bar always appears at the top.

1) add the class=”ui-header-fixed” to the data-role=”header”

This makes the top bar appear on the top of the page instantly when scrolling

or better still for a better effect.

2) add the data-position=”fixed” to the data-role=”header”

This makes a fade out and fade in effect on the top bar navigation bar to show up!

Here is an example.

<div data-role=”page” id=”home”>
    <div id=”topbar” data-role=”header” data-position=”fixed”>
        <a data-role=”none” id=”menu-button” href=”#”class=”showMenu”></a>
        <h1>Title</h1>
    </div><!– /header –>
    <div data-role=”content”>
        <div id=”mainsite” height=”100%” width=”100%”>
          Testing
        </div>
    </div><!– /content –>    
</div><!– /page –>

Advertisements

From → Uncategorized

Leave a Comment

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: