Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery mobile fixed (always on top) header

I have looked through other posts on stackoverflow but they seem too complicated for such a simple task.

All I want to do is have a fixed header on top my mobile app that will ALWAYS stay there even when I scroll the "listview". Please tell the simplest way to achieve this. Right now when I scroll down the header does appear but after tapping it goes away. How can I hack this jquery go away behaviour? Thanks!

I have this:

<!DOCTYPE html> 
<html> 
<head> 
<title>Testing Jquery</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 

<body> 
<div data-role="page">

<div data-role="header" data-position="fixed">
    <h1>Page Title</h1>
</div><!-- /header -->

<div data-role="content">   
    <ul data-role="listview" data-theme="g">
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
    </ul>   
</div><!-- /content -->

</div><!-- /page -->
</body>
</html>
like image 212
Play Games Avatar asked Oct 08 '22 16:10

Play Games


1 Answers

Check this doc from jquerymobile.com . Hope this helps.

like image 81
Marko Rakic Avatar answered Oct 12 '22 12:10

Marko Rakic