Phonegap 2.8位置：固定不能正常工作 [英] Phonegap 2.8 Position: fixed is not working properly

问题描述

花了16个小时，牺牲了对各种神的动物，我必须遗憾地说，我正处于精神崩溃的边缘。

After spending 16 hours and having sacrificed critters to various gods I must regretfully say that I'm on the verge of mental meltdown.

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

I am writing an PhoneGap 2.8 application for Android (in the future will port to iOS). As main frameworks I use jQuery (with many plugins), Require, Underscore and Backbone. On one fatal morning I got a task that header menu of my application must "imitate" the way facebook app's header does (follow the scroll).

最初我相信添加position：fixed属性到标题div将会很简单 - 我从来没有错过。事实证明，位置：fixed css属性在WebView中不能正常工作，这个问题已经忍受了好几年了。
这个问题已经在各种论坛和文章中详细讨论过，并提出了各种解决方案 - 在我的案例中都没有工作。

Initially I believed that adding "position:fixed" attribute to the header div would would be simple enough- have I never been more wrong. As it turns out, position:fixed css attribute doesn't work properly in WebView and the issue has endured for years now. This issue has been discussed in length in various forums and articles and various "solutions" have been proposed- none are working in my case.

将标题位置设置为滚动时固定，滚动时设置为绝对位置。理论上它工作，但它是滞后。
试过我研究了不同的插件或框架，可以帮助在这种情况下。
iScroll - 强制指定的结构到html和严重缺乏文档让我远离它。
jQueryMobile - 由于它是一个整体框架，将它集成到我的项目将意味着改变很多东西。根据我的理解，它不提供持久的头。

I have tried to set header's position to fixed when scrolling and to absolute when scrolling is done. Theoretically it works, but it is laggy. Having tried that I looked into different plugins or frameworks that could help in the case. iScroll - Forces a specified structure to html and severe lack of documentation threw me away from it. jQueryMobile - Since it is a whole framework, integrating it to my project would mean changing alot of stuff. As I understand, it wont provide a persistent header.

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

I have heard of Bartender and GloveBox but neither of them have documentation and they aren't in constant development (last commits are > year old ).

使用jsHybugger我检查了标题，当它在位置：固定我注意到，覆盖在检查器中选择的div的蓝色框保持在点击区域为标题。所以如果我滚动，标题移动与视口，但hitarea保持在原地。它让我想知道，如果有一种方法强制WebView重新计算点击区域？

Using jsHybugger I inspected the header when it is in position: fixed an I have noticed that Blue box that overlays a div being selected in inspector is staying where click area is for the header. So if I scroll, the header moves with viewport but hitarea stays in place. It got me wondering, if there is a way to force WebView to recalculate the click area?

全部和任何帮助非常感谢。

All and any help is very much appreciated.

推荐答案

因此，灵感来自此链接，我做了一个快速小提琴如何可以在 position：fixed 下工作。请注意，小提琴与这里的代码不同，它只是说明了这应该如何工作。

So, inspired by this link, I made a quick fiddle on how this could work without position:fixed. Note that the fiddle is not the same as the code here, it just illustrates how this is supposed to work.

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

这篇关于Phonegap 2.8位置：固定不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！