1

我在使用phonegap制作的应用程序上固定位置有问题..直到现在我认为它应该正常运行，但我发现在特定情况下固定位置“中断”..我排在首位（ div）有几个选项卡和每个选项卡的 onclick 与一些 javascript 和 css 我使用显示属性更改主视图..

但是我发现，如果我在视图上向下滚动，然后选择更改选项卡，那么整个选项卡行而不是保持“固定”在顶部，它会向下移动，并在新的较低位置上“固定”比最高的位置..

我的代码的主要布局是

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<head>
</head>
<body>
<div id="tabwrap">a couple of divs for tabs blah blah</div>
<div id="content">main view with hide/show etc</div>
</body>

（我包含元视口标签只是为了指出我也在使用它）如果主视图没有向下滚动，并且它在顶部，那么没有中断固定位置，并且按预期保持在顶部..我试图通过在此行的每个选项卡的 onclick 事件上添加来“欺骗”它

document.body.scrollTop = document.documentElement.scrollTop = 0;

这样它会在加载相应div中的下一个内容之前返回顶部，但没有成功..

和CSS

#tabwrap {height:3em; position:fixed; width:100%; }
#content { padding-top:4em; width:100%; }

这是来自 jsfiddle 的一个小演示，但不知道它是否有用.. http://jsfiddle.net/B3Y5N/7/ 我已经删除了一些代码以使其更简单

奇怪的是，在 2.3.5 (samsung s5570) 上它没有问题，我注意到 4.2.2 (nexus) 上的问题，而我期望相反..

4

1 回答 1

2

在这里，我所做的更改似乎已经解决了这个问题..

 #tabwrap {height:3em; position:fixed; width:100%; top:0; left:0; z-index:100;}

 #content {position absolute; top:4em; width:100%; height:100%}

也从 html 文档中删除了

height:device-height

从

meta name=viewport tag
于 2013-09-01T00:38:42.430 回答