Phonegap 2.8中，固定位置（position: fixed）无法正常工作

Question

Phonegap 2.8中，固定位置（position: fixed）无法正常工作

4

经过16个小时的努力和祭拜各种神灵，我不得不遗憾地说，我快要崩溃了。

我正在为Android编写一个PhoneGap 2.8应用程序（未来将移植到iOS）。我使用的主要框架是jQuery（带有许多插件），Require，Underscore和Backbone。

在一个致命的早晨，我收到了一个任务，即我的应用程序的标题菜单必须“模仿”Facebook应用程序的标题菜单（跟随滚动）。

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

我尝试在滚动时将标题的位置设置为固定，并在滚动完成后将其设置为绝对。理论上它可以工作，但是它很卡顿。尝试过之后，我研究了一些可以帮助解决问题的插件或框架。 iScroll-强制指定html结构和严重缺乏文档使我放弃了它。 jQueryMobile-由于它是一个完整的框架，将其集成到我的项目中意味着改变很多东西。据我所知，它不会提供持久的标题菜单。

我听说过Bartender和GloveBox，但它们都没有文档，并且它们没有在不断发展（最后提交时间>一年）。

使用jsHybugger，当标题处于position：fixed时，我检查了它，我注意到覆盖div的蓝色框在检查器中被选中，停留在头部的点击区域。因此，如果我滚动，标题将随视口移动，但命中区域保持不变。这让我想知道，是否有一种方法可以强制WebView重新计算点击区域？

非常感谢任何帮助。

- Erich Jagomägis

也许这个答案可以帮到你：http://stackoverflow.com/questions/14267527/uiwebview-and-css-fixed-position - mwfire

3个回答

1

这并不是PhoneGap的问题。实际上，Android版本低于4.0时，position: fixed无法正常工作。有一个快速的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; }

- Vicky Gonsalves

0

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

使用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，所以只使用了上面的内容来实现我想要的效果。

希望有人会觉得这个有用。

- Andy4Ward

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mwfire · Accepted Answer

所以，受到这个链接的启发，我制作了一个快速的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;
}