javascript - Phonegap 2.8 位置 : fixed is not working properly

Question

在花了 16 个小时并向各种神灵献祭小动物之后，我必须遗憾地说，我正处于精神崩溃的边缘。

我正在为 Android 编写一个 PhoneGap 2.8 应用程序(将来会移植到 iOS)。作为主要框架，我使用 jQuery(带有许多插件)、Require、Underscore 和 Backbone。 在一个致命的早晨，我接到了一项任务，我的应用程序的标题菜单必须“模仿”facebook 应用程序标题的方式(跟随滚动)。

最初我认为将“position:fixed”属性添加到标题 div 会很简单 - 我从来没有错过。事实证明，position:fixed css 属性在 WebView 中不能正常工作，这个问题已经存在多年了。 这个问题已经在各种论坛和文章中进行了详细讨论，并且已经提出了各种“解决方案” - 没有一个适用于我的情况。

我试图在滚动时将页眉的位置设置为固定，在滚动完成时设置为绝对。理论上它可以工作，但它是滞后的。 尝试过后，我研究了可能对这种情况有所帮助的不同插件或框架。 iScroll - 将指定的结构强制为 html 并且严重缺乏文档使我远离它。 jQueryMobile - 因为它是一个完整的框架，所以将它集成到我的元素中意味着要改变很多东西。据我了解，它不会提供持久 header 。

我听说过 Bartender 和 GloveBox，但它们都没有文档，也没有持续开发(最后一次提交 > 岁)。

使用 jsHybugger 我在标题就位时检查了标题:修复了我注意到覆盖在检查器中选择的 div 的蓝色框停留在标题的点击区域。因此，如果我滚动，标题会随着视口(viewport)移动，但 hitarea 会保持原位。这让我想知道，是否有办法强制WebView重新计算点击区域？

非常感谢所有帮助。

Answer 1

因此，灵感来自 this link , 我做了一个快速 fiddle关于在没有 position:fixed 的情况下如何工作。请注意， fiddle 与此处的代码不同，它只是说明了它应该如何工作。

HTML

<div class="page-wrapper">
    <div class="header"><h3>header</h3></div>
    <div class="content-wrapper">
        <div class="content">
          <!-- Your content goes here -->
        </div>
    </div>
</div>

CSS

body {
    height: 100%;
    padding: 0;
    margin: 0;
}

.page-wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.header {
    position: absolute;
    top:0;
    left:0;
    right:0;
    padding: 3px 0;
    color: #FFF;
    background: #000;
    text-align: center;
}
.content-wrapper {
    position: absolute;
    padding:0;
    top: 65px;
    left: 0;
    right: 0;
    bottom:0;
    background: #CCC;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.content {
    padding: 15px;
}