在 jquery mobile 中固定标题滚动/拖动 [英] fixed header scrolls/drags in jquery mobile
问题描述
我正在使用 jquery mobile 和 phonegap 开发移动网络应用程序.我开发了一个 hello world 应用程序.它有页眉、页脚和内容区域.页眉和页脚使用 data-position="fixed"
属性固定.但是页眉和页脚的问题是,当我向下滚动并且内容完成并且不再需要滚动时,它的页眉会向下拖动(为了灵活性或指示并且没有更多内容).与其他 ios 应用程序一样,此功能存在,但在这些应用程序中,页眉和页脚不会上下拖动内容区域只会拖动.请看图片我的意思
如上图所示,标题被拖到我不想要的底部.我只希望内容区域具有此功能.我怎样才能做到这一点,以便仅在没有更多内容可供查看时才拖动内容区域?
任何关于 css、jquery 或 jquery 移动技巧的帮助?
更新
此处为 HTML 代码
<div data-role="header" id="header" data-position="fixed"><h1>页面标题</h1></div><!--/header --><div data-role="content" id="contents"><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1></div><!--/content --><div data-role="footer" data-position="fixed"><h4>页脚</h4></div><!--/footer --></div><!--/page --> 解决方案 不幸的是,您的示例将不起作用,因为 iOS 不允许您这样做.
解决方案 1 - iOS 和 Android
值得庆幸的是,有一个 3rd 方 jQuery Mobile 插件可以帮助您解决这个问题,而且它的工作原理非常棒.这是一个 iOS 和 Android 解决方案.
你需要的是一个 iScrollView 插件iScroll 插件的基础.
我不能给你一个 jsFiddle 的例子,因为它不适用于 iScrollView,至少我不能让它工作,所以这里是一个例子,你只需复制到新的 HTML 文件中,然后在您的 iOS 上试用即可.
首先这是我制作的一个在线示例:http://www.fajrunt.org/
HTML:
<html lang="zh-cn"><头><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><title>演示</title><link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile-1.3.1.min.css"/><link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview.css"/><link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview-pull.css"/><script src="http://www.fajrunt.org/js/jquery-1.9.1.min.js"></script><script src="http://www.fajrunt.org/js/jquery.mobile-1.3.1.js"></script><script src="http://www.fajrunt.org/js/iscroll.js"></script><script src="http://www.fajrunt.org/js/jquery.mobile.iscrollview.js"></script>头部><身体><div data-role="page" class="index-page"><div data-role="header" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="header"><h1>索引页</h1>
<div data-role="content" class="example-wrapper" data-iscroll><p>一些将被滚动的内容</p><p>将滚动的更多内容</p><ul data-role="listview"><li>项目 1</li><li>项目 2</li><p>更多内容.它将滚动 data-iscroll div 中的任何内容.</p><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1><h1>你好,卷云.</h1>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="footer"><h1>我的页脚</h1>