Javascript Phonegap 2.8位置：fixed未正常工作

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

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

起初，我认为将“position:fixed”属性添加到header div将非常简单——我从来没有错过。事实证明，position:fixedcss属性在WebView中无法正常工作，这个问题已经持续了多年。 这个问题已经在各种论坛和文章中进行了详细讨论，并提出了各种“解决方案”——在我的情况下，没有一个是有效的

我已经尝试设置标题的位置固定时滚动和绝对时滚动完成。理论上它是有效的，但它是滞后的。 尝试过之后，我研究了不同的插件或框架，这些插件或框架可以帮助解决这个问题。 iScroll-强制将指定的结构转换为html，严重缺乏文档使我无法使用它。 因为它是一个完整的框架，所以将它集成到我的项目中意味着改变很多东西。据我所知，它不会提供一个持久的标题

我听说过酒保和手套箱，但它们都没有文档，也没有持续开发（最近提交的文件>年）

使用jsHybugger，我在标题就位时检查了标题：修复了一个问题，我注意到覆盖在inspector中选择的div上的蓝色框停留在标题的单击区域。因此，如果我滚动，标题将随视口一起移动，但区域保持不变。这让我想知道，是否有办法强迫WebView重新计算点击区域

非常感谢您的帮助

因此，受此启发，我快速介绍了如何在没有

的情况下实现此功能。position:fixed

。注意，fiddle与这里的代码不同，它只是说明了应该如何工作

HTML

---

这不是电话差距的问题。实际位置：修复在低于4.0的android版本中不起作用 有一个css快速修复程序：

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

---

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

使用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，所以只使用上面的内容来实现我的目标

---

希望有人会觉得这很有帮助。

也许这个答案有帮助：我已经尝试过了，但我的android（Galaxy S2）上没有滚动条。overflow-y:scroll；，似乎有点问题：（让我解释一下，Scroll是存在的，但它滚动整个页面，而不仅仅是我的内容div，因此我的标题会滚动掉。嗯，它在Android Emulator Webview中工作，只做了一些修改。看看它和源代码。这行得通吗？不能放小提琴，因为它在框架中不起作用……我得到了一个可行的解决方案：D。我包装了我的con一个小隔间里的帐篷（容器包装器）内容包装器说他是溢出的：隐藏的。然后我说内容的宽度，它像一个符咒一样工作。嗯..几乎像一个符咒..我有一些谷歌地图显示的内容，在这些页面中滚动看起来有点歪斜，仍在调查中。但非常感谢你很好地注入了一个想法：PPerfect！这就是为什么至少，我也做了演示，所以我会更新答案，以便其他人也可以使用它。

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

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

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