Phonegap 2.8位置：固定不正常

Question

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

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

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

我试图在滚动时将标题的位置设置为固定，在滚动完成时设置为绝对。理论上它有效，但它是滞后的。 经过尝试，我查看了可能对案例有所帮助的不同插件或框架。 iScroll - 强制指定的结构为html，严重缺乏文档使我远离它。 jQueryMobile - 因为它是一个完整的框架，将它集成到我的项目意味着改变很多东西。据我了解，它不会提供持久性标题。

我听说过Bartender和GloveBox，但他们都没有文档，而且他们没有不断发展（最后的提交都是>岁）。

使用jsHybugger我在标题位置时检查了标题：修复了我注意到在检查器中选中了一个div的蓝色框是保留在标题点击区域的位置。因此，如果我滚动，标题会随着视口移动，但是hitarea会保持原位。它让我想知道，如果有办法迫使WebView重新计算点击区域？

非常感谢所有和任何帮助。

Answer 1

因此，受到this link的启发，我快速fiddle了解了如何在没有position:fixed的情况下实现这一点。请注意，小提琴与此处的代码不同，它只是说明了它应该如何工作。

<强> 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;
}

Answer 2

这不是phonegap的问题。实际上位置：固定不能在Android版本小于4.0 它有一个快速的CSS修复：

<div class="header"> this is fixed positioned div<div>

的CSS：

.header{ position:fixed ; -webkit-backface-visibility: hidden;  top:0; left:0; width: 100px; height:30px; background: red; }

Answer 3

在继承了使用定位系统的项目后，我遇到了。大多数人可能会知道现在不走这条路，但以防万一有人确实在这里寻找解决方案...

使用flexbox布局可以实现上述目标。

这样，css如下：

.pageWrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    flex-direction: column;
}

.screen-content-wrapper {
    padding:0;
    flex: 1;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}

我没有编辑内容CSS，因此仅使用以上内容实现了我追求的目标。

希望有人会对此有所帮助。