JQuery Mobile固定工具栏和页脚栏消失了吗？

时间：2011-04-23 10:16:17

标签： jquery-mobile

我正在使用JQuery Mobile版本4.1a并使用：

data-position="fixed"
页眉和页脚上的

。

当我滚动内容时，它会消失然后再次出现。

有没有办法让它保持在它的位置而不是每次我滚动页面时都消失？

由于

15 个答案:

答案 0 :(得分：111)

将data-tap-toggle="false"添加到元素

或

将此添加到Javascript 

$("[data-role=header]").toolbar({ tapToggle: false });

旧版本的jQuery使用.fixedtoolbar()。

jQuery Mobile Docs - Events

答案 1 :(得分：15)

我找到了解决方案。我在我的项目上测试了它，它就像一个魅力。

以下是网址：https://github.com/yappo/javascript-jquery.mobile.iscroll

与AppML一样使用的JS解决方案。

另外，这是一个演示：

http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

p.s：我的项目比他们的实际演示效果更好，所以值得一试。

享受：o）

答案 2 :(得分：4)

我的项目中有jquery mobile iscroll的问题。也许我使用的一些库是相互干扰的（我使用的是knockout和jquery.templates以及其他一些东西）。对我有用的解决方案是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 magi上，它不能很好地工作，但jquery移动设备在该设备上运行良好。请注意，scrollview正在进行实验，尚未添加到主jquery移动项目中。

如果您对iScroll或jquery mobile scrollview没有运气，那么wink工具包是另一种选择。

http://www.winktoolkit.org/tutorials/119/

与iScroll一样，我无法使用我的特定项目，但我认为我并没有那么努力。

答案 3 :(得分：4)

<div data-role="footer" data-tap-toggle="false"
     data-theme="c" id="footer" data-position="bottom" >
    <h4 align="center" >copyright 2012 @KoshWTF</h4>
    <p>&nbsp;</p>
</div>

如果您对标题有任何问题，也可以为标题执行此操作。 欢呼声

答案 4 :(得分：3)

        $(document).bind("mobileinit", function() {
             $.support.touchOverflow = true;

              $.mobile.touchOverflowEnabled = true;
              $.mobile.fixedToolbars.setTouchToggleEnabled(false);

        });

这很有效。在Android 2.3中测试

答案 5 :(得分：2)

我想在Satch3000的答案中添加评论，但我没有选择这样做 - 不知道为什么。我试过https://github.com/yappo/javascript-jquery.mobile.iscroll，但不幸的是它不能用于最新的jquery移动库（http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js)

答案 6 :(得分：2)

添加到您的页脚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;
}

欢呼声。

答案 7 :(得分：1)

$ .mobile.fixedToolbars.setTouchToggleEnabled（false）对我不起作用，但编辑javascript-jquery.mobile.iscroll文件如下似乎解决了Satch3000提出并由user418775查询的iscroll解决方案的问题。 / p>

更改第（99）行...

if（$ .mobile.activePage.data（“iscroll”）==“enable”）{

为...

if（（$ .mobile.activePage）＆amp;＆amp;（$ .mobile.activePage.data（“iscroll”）==“enable”））{

答案 8 :(得分：1)

我是法国人抱歉我的英语;

我用这段代码解决了这个问题，但它并不完美（必须适应你的情况）：

$("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);

答案 9 :(得分：1)

这对我有用：

在函数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" ) );
      });

答案 10 :(得分：1)

这很简单。

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

它对我有用。

答案 11 :(得分：0)

如果您已尝试过所有内容并且仍在努力解决此问题（就像我一样），请尝试更新您的jQuery移动版本。在v1.3.1中data-position="fixed"的工作方式应该是开箱即用的。我没有看到这个建议，这是在尝试任何代码之前首先要检查的，所以我想我会提到它。

答案 12 :(得分：0)

我遇到了同样的问题，我能够通过将以下转换代码添加到固定位置元素（transform: translateZ(0);-webkit-transform: translateZ(0);）来修复它，该位置元素强制浏览器使用硬件加速来访问设备的图形处理单元（GPU）让像素飞起来。另一方面，Web应用程序在浏览器的上下文中运行，这使得软件可以完成大部分（如果不是全部）渲染，从而减少了转换的马力。但是Web一直在追赶，大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速。

使用-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);
}

答案 13 :(得分：0)

在JQM 1.3.2上，这是我的解决方案

  1. 添加数据 - tap-toggle =＆＃34; false＆＃34;到固定的页眉/页脚
  2. 添加以下CSS以覆盖JQM CSS

    3. ＆＃13;
    ＆＃13; 
    .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;
}
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 14 :(得分：-2)

$.mobile.fixedToolbars.setTouchToggleEnabled(false);

当您单击/触摸页面时，这将阻止工具栏隐藏。

相关问题
最新问题