在花费了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重新计算点击区域？
非常感谢所有帮助。
因此，通过启发这个环节，我做了一个快速小提琴如何，这可能不工作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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句