如何保持 jquery 移动页眉和页脚固定？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4724068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to keep jquery mobile header and footer fixed?
提问by Pawan
I am making a website using jQuery Mobile.
我正在使用 jQuery Mobile 制作网站。
How to keep jquery mobile header and footer fixed? I just want only the content to scroll(just like it happens in iPhone applications), and keep the headers and footers fixed at top and bottom.
如何保持 jquery 移动页眉和页脚固定？我只想滚动内容（就像在 iPhone 应用程序中发生的那样），并保持页眉和页脚固定在顶部和底部。
Any suggestions ?
有什么建议 ？
回答by Dirk Pennings
Add this attribute to your header/footer div:
将此属性添加到页眉/页脚 div：
<div data-role="header" data-position="fixed">
<h1>Header Page 1</h1>
</div>
Also, you might have a look at this: http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html
另外，您可能会看看这个：http: //jquerymobile.com/test/docs/toolbars/footer-persist-a.html
回答by i8abug
The issue I had with jquery mobile fixed is that the header and footer fade. I imagine this is something that they will correct in the future but in addition to iscrollsuggested by Dan, there is also jquery mobile scrollview and wink toolkit. I had good results with jquery mobile scrollview but no luck with iscroll or wink
我在 jquery mobile 上遇到的问题是页眉和页脚褪色。我想这是他们将来会纠正的事情，但除了Dan建议的iscroll之外，还有 jquery mobile scrollview 和 wink 工具包。我在 jquery mobile scrollview 上取得了不错的结果，但在 iscroll 或 wink 上没有运气
1) Jquery mobile Scrollview
1）Jquery移动滚动视图
- Demo: http://jquerymobile.com/test/experiments/scrollview/
- Code: https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/
- 演示：http: //jquerymobile.com/test/experiments/scrollview/
- 代码：https: //github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/
2) Wink Toolkit
2) 眨眼工具包
回答by Dan
Another option is check out iScroll: http://cubiq.org/iscroll
另一种选择是查看 iScroll：http://cubiq.org/iscroll
回答by Novin.Kh
To enable this toolbar feature type, you apply the data-fullscreen="true" attribute and the data-position="fixed" attribute to both the header and footer div elements. The framework will also unset the padding for the content container (ui-content)
要启用此工具栏功能类型，请将 data-fullscreen="true" 属性和 data-position="fixed" 属性应用于页眉和页脚 div 元素。该框架还将取消设置内容容器的填充（ui-content）
<div data-role="header" data-position="fixed" data-fullscreen="true">
<h1>Header Page 1</h1>
</div>
回答by the_dillio
Another way is to use http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html(jquery.mobile.scrollview.js, scrollview.js, and easing.js) and put data-scroll="true" in the page div tag as suggested here: scrollview for jQuery mobile tollbars *not* to be fixed.
另一种方法是使用http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html（jquery.mobile.scrollview.js、scrollview.js和 easing.js）并将 data-scroll="true "在页面 div 标签中，如此处建议的：scrollview for jQuery mobile tollbars *not* to be fixed。
Worked well for me thus far.
到目前为止对我来说效果很好。
Cheers,
干杯，
E
乙
回答by Aschwin
Use iScroll v4. Keep header and footer fixed and scroll only the content. iScroll needs a wrapper DIV and child element. In the example below the content_items is the child div with the items to scroll. I noticed that you can not combine the data-role="content" and the wrapper DIV for iScroll in one HTML element!.
使用 iScroll v4。保持页眉和页脚固定，只滚动内容。iScroll 需要一个包装 DIV 和子元素。在下面的示例中， content_items 是带有要滚动的项目的子 div。我注意到您不能将 data-role="content" 和 iScroll 的包装器 DIV 组合在一个 HTML 元素中！。
<script type="text/javascript">
var myScroll;
$(document).ready(function () {
myScroll = new iScroll('wrapper');
});
</script>
<div data-role="page">
<div id="header" data-role="header" data-position="fixed"></div>
<div id="content" data-role="content" class="contentcontainer contentsearched">
<div id="wrapper">
<div id="content_items" class="content_items"></div>
</div>
</div>
<div id="footer" data-role="footer" data-position="fixed">
<div data-role="navbar"></div>
</div>
</div>
回答by Sagiv Ofek
回答by MCBL
For iOS 6, 7 and 8, this hack seems to solve the problem and trigger a redraw to correctly replace the fixed header (with or without panel) on iPod, iPhone and iPad. Note: We test for iOS device and only add this event in that case *.
对于 iOS 6、7 和 8，此 hack 似乎解决了问题并触发重绘以正确替换 iPod、iPhone 和 iPad 上的固定标题（带或不带面板）。注意：我们针对 iOS 设备进行测试，并且仅在这种情况下添加此事件 *.
if (iOS()) {
$(document).on('blur', 'input:not(:submit), select, textarea', function () {
var paddingBottom = parseFloat($(".ui-mobile-viewport, .ui-page-active").css("padding-bottom"));
$(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", (paddingBottom + 1) + "px");
window.setTimeout(function () {
$(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", paddingBottom + "px");
}, 0);
});
}
* Test for iOS:
* iOS 测试：
var iOS() = function () {
var userAgent = window.navigator.userAgent.toLowerCase();
return (/iphone|ipad|ipod/).test(userAgent);
}
