Question

我正在尝试使用ui-bar修复div，就像我们可以选择保持标题工具栏一样。我想在切换标题时保持uibar固定，但我无法实现这个

Answer 1

你需要创建两个标题 div，第一个应该固定 data-position="fixed"并在身体收到tap事件后激活隐藏data-fullscreen="true"。

<div data-role="header" data-fullscreen="true" data-position="fixed">
 <h1>Fixed Header</h1>
</div>

第二个是普通（不固定）标题。

<div data-role="header">
 <h1>Floating Header</h1>
</div>

在pagecontainershow上，将第二个标题放在已修复标题下方。使用.one()而不是.on()，因为您只需要设置第二个标题的位置一次。

此外，您还需要通过更改margin-top值来推送 content 的div，以便不与 second 标头重叠。

$(document).one("pagecontainershow", function () {
  var fixed = $(".ui-header-fixed").outerHeight() - 1;
  $(".ui-header:eq(1)").css("top", fixed);
  $(".ui-content").css("margin-top", fixed);
});

稍后，当已修复通过收听动画事件animationend webkitAnimationEnd oanimationend MSAnimationEnd可见或隐藏时，您需要重新定位第二个标题。

$(document).on("pagecreate", function () {
    $(".ui-header-fixed").on("animationend webkitAnimationEnd oanimationend MSAnimationEnd", function (e) {
        var fixed = $(this).outerHeight() + $(this).offset().top;
        $(".ui-header:eq(1)").css("top", fixed);
        $(".ui-content").css("margin-top", fixed);
    });
});

<强> Demo

jquery Mobile 1.4.1切换标题但保持固定条形

1 个答案: