5

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>
Play Games
  • 51
  • 1
  • 3
  • Two, same issues, are answered here: http://stackoverflow.com/questions/6925246/in-jquery-mobile-header-and-footers-are-always-hiding-when-clicking-inside-the http://stackoverflow.com/questions/6962961/jquery-mobile-static-footer-navbar – zigomir Mar 08 '12 at 20:34

1 Answers1

4

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

Adarsh V C
  • 2,314
  • 1
  • 20
  • 37
Marko Rakic
  • 76
  • 4