jquery mobile固定（始终在顶部）标题

发布于 2025-01-05 08:17:24 字数 1252 浏览 0 评论 0原文

我已经浏览了 stackoverflow 上的其他帖子，但对于这样一个简单的任务来说，它们似乎太复杂了。

我想要做的就是在我的移动应用程序顶部有一个固定标题，即使我滚动“列表视图”，该标题也始终保留在那里。请告诉我们实现这一目标的最简单方法。现在，当我向下滚动时，标题确实出现，但点击后它就消失了。我怎样才能破解这个 jquery 消失行为？谢谢！

我有这个：

<!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>

原文

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>

分享到QQ

分享到微博