JQuery Mobile的固定工具栏和页脚栏消失？
我正在使用JQuery Mobile版本4.1a和使用：
data-position="fixed" 在页眉和页脚上。
当我滚动的内容消失，然后再次出现。
有没有办法让它保持在它的位置，而不是每次我滚动页面消失？
谢谢
将data-tap-toggle="false"到元素
要么
添加到Javascript
$("[data-role=header]").toolbar({ tapToggle: false });
老版本的jQuery使用.fixedtoolbar() 。
jQuery Mobile Docs – 事件
我find了解决scheme。 我已经在我的项目上testing过它，它的function就像一个魅力。
这是url： https ： //github.com/yappo/javascript-jquery.mobile.iscroll
这是与AppML使用的相同的JS解决scheme。
另外，这里是一个演示：
http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html
ps：在我的项目上比在他们的实际演示中效果更好，所以值得一试。
享受：o）
我的项目中有jquery mobile iscroll的问题。 也许我使用的一些库是互相干扰的（我正在使用knockout和jquery.templates以及一些其他的东西）。 为我工作的解决scheme是jQuery的移动滚动视图。 演示可以在这里查看。
http://jquerymobile.com/test/experiments/scrollview/
代码在这里
https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/
你需要包括
- jquery.easing.1.3.js
- jquery.mobile.scrollview.js
- jquery.mobile.scrollview.css
- scrollview.js
我最近使用了这个jquery移动项目，它在iphone 3gs上运行得非常好。 在我的旧HTC HTC magi上，它不能很好地工作，但没有任何jquery mobile在该设备上运行良好。 请注意，滚动视图正在试验中，并没有被添加到主jQuery的移动项目。
如果你没有运气与iScroll或jQuery的移动滚动视图，眨眼工具包是另一种select。
http://www.winktoolkit.org/tutorials/119/
就像iScroll一样，我无法得到这个与我的特定项目一起工作，但我不认为我真的努力尝试。
<div data-role="footer" data-tap-toggle="false" data-theme="c" id="footer" data-position="bottom" > <h4 align="center" >copyright 2012 @KoshWTF</h4> <p> </p> </div>
PS你也可以为标题做这个，如果你也有问题的话。 干杯
$(document).bind("mobileinit", function() { $.support.touchOverflow = true; $.mobile.touchOverflowEnabled = true; $.mobile.fixedToolbars.setTouchToggleEnabled(false); });
这工作。 在Android 2.3testing
我想给Satch3000的答案添加一个评论，但我没有这个select – 不知道为什么。 我试过https://github.com/yappo/javascript-jquery.mobile.iscroll ，但不幸的是它不能用最新的jQuery移动库（http://code.jquery.com/mobile/1.0b1/jquery 。移动-1.0b1.min.js）
添加到您的页脚class="FixedFooter" ，并确保从页脚中删除data-position="fixed" 。
添加到你的<head>
<style type="text/css"> .fixedFooter { position: fixed !important; left: 0px !important; right: 0px !important; bottom: 0px !important; z-index: 999 !important; }
干杯。
$ .mobile.fixedToolbars.setTouchToggleEnabled（false）对我不起作用，但编辑javascript-jquery.mobile.iscroll文件似乎解决了Satch3000提出的iscroll解决scheme的问题，并由user418775查询。
改行（99）…
if（$ .mobile.activePage.data（“iscroll”）==“enable”）{
至…
（（$ .mobile.activePage）&&（$ .mobile.activePage.data（“iscroll”）==“enable”））{
我是法国人对不起，我的英语;
我用这个代码解决了这个问题，但它并不完美（必须适应你的情况）：
$("body").live('scrollstart', function (event, ui) { if ($(".divDel").length == 0) { //prevents the offset var taill = $("[data-role=header]").height(); $("[data-role=header]").after("<div class='divDel' style='height:" + taill + "px;'></div>"); $("[data-position=fixed]").css("display", "none"); } }).live('vmouseup scrollstop', function (event, ui) { $(".divDel").remove(); $("[data-position=fixed]").css("display", "block"); }); $.mobile.fixedToolbars.setTouchToggleEnabled(false);
这对我来说是有效的：
在ResizePageContentHeight()函数内添加一行：
$page.children('.ui-footer').css('position','fixed');
就在之前：
$content.height(wh - (hh + fh) - (pt + pb))
完整的代码:(在底部的jquery.scrollview.js中添加）
function ResizePageContentHeight(page) { var $page = $.mobile.activePage, $content = $page.children( ".ui-content" ), hh = $page.children( ".ui-header" ).outerHeight() || 0, fh = $page.children( ".ui-footer" ).outerHeight() || 0, pt = parseFloat($content.css( "padding-top" )), pb = parseFloat($content.css( "padding-bottom" )), wh = window.innerHeight; $page.children('.ui-footer').css('position','fixed'); $content.height(wh - (hh + fh) - (pt + pb)); } $( ":jqmData(role='page')" ).live( "pageshow", function(event) { var $page = $( this ); $page.find( ".ui-content" ).attr( "data-" + $.mobile.ns + "scroll", "y" ); $page.find( ":jqmData(scroll):not(.ui-scrollview-clip)" ).each(function () { var $this = $( this ); if ( $this.hasClass( "ui-scrolllistview" ) ) { $this.scrolllistview(); } else { var st = $this.jqmData( "scroll" ) + "", paging = st && st.search(/^[xy]p$/) != -1, dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null, opts = { direction: dir || undefined, paging: paging || undefined, scrollMethod: $this.jqmData("scroll-method") || undefined }; $this.scrollview( opts ); } }); ResizePageContentHeight( event.target ); }); $( window ).bind( "orientationchange", function( event ) { ResizePageContentHeight( $( ".ui-page" ) ); });
这很简单。
<div data-role="header" data-position="fixed" data-tap-toggle="false"> </div>
这个对我有用。
如果你已经尝试了一切，而你仍然在努力解决这个问题（就像我一样），试着更新你的jQuery手机版本。 在v1.3.1 data-position="fixed"作品就像它应该开箱即用。 我没有看到这个build议，这是在尝试任何代码之前首先要检查，所以我想我会提到它。
我遇到了同样的问题，我可以通过将以下转换代码添加到固定位置元素（ transform: translateZ(0);-webkit-transform: translateZ(0); ）来强制浏览器使用硬件加速访问设备的graphics处理单元（GPU），使像素飞行。 另一方面，Web应用程序运行在浏览器的上下文中，这使软件可以执行大部分（如果不是全部）的渲染，从而导致转换的function减弱。 但是networking一直在追赶，大多数浏览器厂商现在都通过特定的CSS规则来提供graphics硬件加速。
使用-webkit-transform：translate3d（0,0,0）; 将启动GPU进行CSS转换，使其更平滑（更高的FPS）。
注意： translate3d（0,0,0）根据所看到的不做任何事情。 它将对象在x，y和z轴上移动0px。 这只是一个强制硬件加速的技术。
#element { position: fixed; ... /* MAGIC HAPPENS HERE */ transform: translateZ(0); -webkit-transform: translateZ(0); }
在JQM 1.3.2这里是我的解决scheme
- 将data-tap-toggle =“false”添加到固定的页眉/页脚
- 添加下面的CSS以覆盖JQM CSS
.ui-header-fixed.ui-fixed-hidden, .ui-footer-fixed.ui-fixed-hidden{ position: fixed !important; } header.ui-panel-animate { -webkit-transition: none !important; } header.slidedown.out.reverse { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } header.slidedown.in.reverse { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } header.slidedown.out { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } header.slidedown.in { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } header.slideup.out.reverse { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } header.slideup.in.reverse { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } header.slideup.out { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } header.slideup.in { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } footer.ui-panel-animate { -webkit-transition: none !important; } footer.slidedown.out.reverse { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } footer.slidedown.in.reverse { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } footer.slidedown.out { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } footer.slidedown.in { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } footer.slideup.out.reverse { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } footer.slideup.in.reverse { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } footer.slideup.out { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; } footer.slideup.in { -webkit-transform: none !important; -webkit-animation-name: none !important; -webkit-animation-duration: 0ms !important; transform: none !important; animation-name: none !important; animation-duration: 0ms !important; }
$.mobile.fixedToolbars.setTouchToggleEnabled(false);
这将阻止工具栏在您点击/触摸页面时隐藏。
