固定标题滚动/拖动jQuery的移动

我正在使用jquery mobile和phonegap开发移动web应用程序。 我开发了一个你好世界的应用程序。 它有页眉，页脚和内容区域。 页眉和页脚使用data-position="fixed"属性data-position="fixed" 。 但页眉和页脚的问题是，当我向下滚动，当内容完成，不再需要滚动时，它的头部拖下来（灵活性或指示，并没有更多的内容）。 正如在其他iOS应用程序，这个function存在，但在这些应用程序的页眉和页脚不上下拖动内容区域只拖动。 请看照片我的意思

在这里输入图像说明

如上图所示，标题被拖到我不想要的底部。 我只想要内容区域有这个function。 我怎样才能这样做，使内容区域只有当没有更多的内容可供查看？

任何帮助CSS，jQuery或jQuery的移动技巧？

更新

HTML代码在这里 

 <div data-role="page"> <div data-role="header" id="header" data-position="fixed"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content" id="contents"> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> </div><!-- /content --> <div data-role="footer" data-position="fixed"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page -->

不幸的是，你的例子不会工作，因为iOS不会允许你这样做。

解决scheme1 ​​ – iOS和Android

幸运的是，有一个第三方的jQuery Mobile插件，可以帮助你解决这个问题，它就像一个魅力。 这是一个iOS和Android解决scheme。

你需要的是一个基于iScroll插件的iScrollView插件。

我不能让你成为一个jsFiddle的例子，因为它不适用于iScrollView ，至less我不能让它工作，所以这里的一个例子，你可以复制到新的HTML文件，并在iOS上尝试它。

首先这里是一个在线的例子： http : //www.fajrunt.org/

HTML： 

 <!DOCTYPE html> <html lang="en"> <head> <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>Demo</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> </head> <body> <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>INDEX PAGE</h1> </div> <div data-role="content" class="example-wrapper" data-iscroll> <p>some content that will be scrolled</p> <p>Some more content that will be scrolled</p> <ul data-role="listview"> <li>Item 1</li> <li>Item 2</li> </ul> <p>Even more content. It will scroll whatever is in the data-iscroll div.</p> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> </div> <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="footer"> <h1>My Footer</h1> </div> </div> </body> </html>

正如你可以看到这个例子像魔术一样工作。 还有一件事，如果你不知道iScrollview也可以解决另一个问题。 比方说，你已经滚动到页面的底部，并有一个button到另一个页面。 当你点击它通常页面将跳转到顶部，然后页面将转换到另一个页面。 这不是一个错误，这只是观点的工作原理。 但tnx到iScrollView你的网页将只是从这一点过渡，当你回来你的网页将仍然在同一个位置。

最后一件事，如果你是一个iOS开发人员， iScrollView与UIScrollView没有任何关系。

解决scheme2 – 仅限iOS

有一个纯粹的CSS修复你的问题，但它只会在iOS上工作，这是我作为第二个解决scheme显示它的方式。

再次，这不是我的解决scheme和官方网页可以在这里find： http : //outof.me/native-scrolling-in-jquery-mobilephonegap-applications/

随着一些页面的变化，你可以启动iOS页面滚动jQuery Mobile。

HTML： 

 <!DOCTYPE html> <html> <head> <title>Scrollable Content Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jQuery Mobile styles --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <!-- Fix for scrolling on iOS prior to iOS 6 --> <style type="text/css"> body { margin: 0; } div#container { position: absolute; width: 100%; top: 0; bottom: 0; } div[data-role="header"] { position: absolute; top: 0; left: 0; right: 0; } div[data-role="content"] { position: absolute; top: 41px; bottom: 0; left: 0; right: 0; } .scrollable { overflow-y: scroll; -webkit-overflow-scrolling: touch; } /* iOS specific fix, don't use it on Android devices */ .scrollable > * { -webkit-transform: translateZ(0px); } </style> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(document).one('mobileinit', function () { // Setting #container div as a jqm pageContainer $.mobile.pageContainer = $('#container'); // Setting default page transition to slide $.mobile.defaultPageTransition = 'slide'; }); </script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div id="container"> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Scrollable Content</h1> </div> <div data-role="content" class="scrollable"> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> <h1>Hello Cirrus.</h1> </div> <div data-role="footer" data-position="fixed"> <h1>Footer</h1> </div> </div> </div> </body> </html>

最后一个问题

关于你的第二个问题。 当你终于到达底部或如果你在一个页面的顶部，你将无法防止弹跳。 只有防止弹跳的方法是防止滚动。 这不是你的select，你需要滚动来访问页面的底部。

最后的笔记

如果你想了解更多关于iScroll + iScrollView的信息，他们如何处理工作示例，然后看看这篇文章 。

如果您使用的是Cordova> = 2.6，则将此行添加到您的config.xml文件中 

 <preference name="DisallowOverscroll" value="true" />

这个选项被称为UIWebViewBounce，所以如果你使用的是旧版本，你需要在config.xml中使用这一行： 

 <preference name="UIWebViewBounce" value="false" />

添加data-tap-toggle =“false”到页眉/页脚也应该这样做，例如 

 <div class="header" data-role="header" data-position="fixed" data-tap-toggle="false">

使用iScrollView的示例代码不起作用。 我复制和粘贴上面的示例HTML页面，并在Android HTC HTT设备上运行ICS和HTC的欲望运行2.3，页眉和页脚消失当你滚动。

我使用phonegap（2.9.0）和Android（4.1.2）编译有相同​​的问题，但没有在其他平台。

最合理的解决scheme是不使用该平台上的固定属性。

我为此奋斗了很久，这真的对我有用，包括你初始化应用程序的地方： 

 $("body").fixedtoolbar({ tapToggle: false });

请参阅此处的完整讨论： https : //forum.jquery.com/topic/is-this-really-so-difficult-full-screen-non-scrolling-page-with-header-and-footer

只需添加溢出：滚动页眉和页脚标签： 

 <div data-role="header" data-position="fixed" style="overflow:scroll;">
Interesting Posts

如何将图片从React Native Camera Roll保存到特定文件夹

iPhone / iPad应用程序是否可以embedded一个可以使用HTML5标签播放RTSPstream的浏览器？

使用Java中的身份validation标签进行AES GCM实现

在ionic framework中显示连接错误消息

如何从Android Activity或Objective C方法打开Sencha Touch View

如何从网页打开android应用程序？

Android / iOS OpenCV眼睛扩张检测

NSNonLossyASCIIStringEncoding等效于Android

如何将页脚菜单停靠在Appcelerator Titanium的底部？

有没有任何API或方法来获取您的应用程序内的WhatsApp聊天消息