jquery Mobile 1.4.1 切换 header 但保持栏固定

Question

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

Answer 1

你需要创建两个header div，第一个应该是fixed data-position="fixed" 并激活隐藏一旦 body 接收到 tap 事件 data-fullscreen="true"。

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

第二个是一个普通的(不固定的)header。

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

在 pagecontainershow 上，将 second header 放在 fixed header 下方。使用 .one() 而不是 .on() 因为您只需要设置一次 second header 的位置。

此外，您还需要通过更改 margin-top 将 content 的 div 向下推，以免与 second 标题重叠值(value)。

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

稍后，您需要在固定通过监听Animation 事件animationend webkitAnimationEnd oanimationend 可见或隐藏时重新定位second header 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