我有一个请求让我们的移动网络应用程序导航栏保持固定。这应该很简单,但是一旦我设置 position:fixed 在包裹它的 div 上,一切都变得一团糟。
首先,所有其他元素现在都被推上并重叠。我得到并且可以使用。最大的问题是滚动现在根本不起作用。我可以单击鼠标滚动按钮以获得“拖动滚动”,但旋转滚轮在最新的 chrome、ie10 和 safari 中没有任何作用。这是一个移动应用程序,因此他们很可能不会使用鼠标,但它也会使设备上的滚动非常不稳定。在 iOS 和 Android 上测试
有趣的是,ie 将中键点击解释为鼠标左键点击。
我发现了一个 so 问题,提到 fixed 不会在有转换的情况下工作。这使得 fixed 实际上是 fixed 而不是 absolute 但我仍然遇到上述问题。
CSS
#header {
position:fixed;
top:0;
left:0;
right:0;
text-align:center;
height: 40px;
background: black;
}
HTML
<div id="header">
<table class="head">
<tr>
<td class="hleft" id="logout" onclick="javascript: window.history.back();"></td>
<td class="comm">Community</td>
<td><asp:TextBox ID="searchbox" CssClass="k-textbox searchSmall" runat="server" OnTextChanged="searchbox_TextChanged"></asp:TextBox></td>
</tr>
</table>
</div>
编辑:我只使用表格,因为我无法正确截断中心文本并保持正确的长度,继续前进并在下一个单元格下,顺便说一句,仍在这样做。这些表格不是必需的,我实际上更喜欢做标准样式的列表菜单,但我试过了但无法让它表现出来。
最佳答案
您没有发布其余代码,但对我来说似乎没问题。这是一个例子:http://jsfiddle.net/t3uxS/
您是否将固定的顶部栏与页面的其余部分一起保留在包装器中?
编辑
向 <div class="content">
添加更多内容(blah blah blah's)查看滚动(如果需要)。
它只会像这样工作:
<div id="header">
</div>
<div class="content">
</div>
关于html - 位置 :fixed on my nav bar breaks scrolling,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19453999/