0

我有一个要求让我们的移动 webapps 导航栏保持固定。这应该很简单，但是一旦我设置了位置：固定在包裹它的 div 上，一切就彻底松了。

首先，所有其他元素现在被向上推并重叠。我得到并且可以使用。最大的问题是滚动现在根本不起作用。我可以单击鼠标滚动按钮以获取“拖动滚动”，但在最新的 chrome、ie10 和 safari 中旋转滚轮没有任何作用。这是一个移动应用程序，因此他们很可能不会使用鼠标，但它也会使设备上的滚动非常不稳定。用 iOS 和 android 测试

有趣的是，ie 将中键单击解释为鼠标左键单击。

我发现了一个这样的问题，提到如果有转换，固定将不起作用。这使得固定实际上是固定的而不是绝对的，但我仍然遇到上述问题。

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>

编辑：我只使用表格，因为我无法让中心文本正确截断并保持正确的长度，继续前进并在下一个单元格下，顺便说一句。表格不是必需的，我实际上更喜欢使用标准样式的列表菜单，但我试过了，但无法让它发挥作用。

4

3 回答 3

1

您没有发布其余代码，但对我来说似乎很好。这是一个例子：http: //jsfiddle.net/t3uxS/

您是否将固定顶部栏与页面内容的其余部分一起保留在包装器中？

编辑

添加更多内容（等等等等）<div class="content">以查看滚动（如果需要）。

它只会像这样工作：

<div id="header">
</div>
<div class="content">
</div>
于 2013-10-18T16:15:24.000 回答
0

该问题可能与您网站上的其他标签有关。将您的标题位置设置为固定会将该部分拉出正常的页面流，而另一个标签部分将填充其下方和周围的空间。我们可以看看你的其余代码和 CSS 吗？

于 2014-03-14T14:11:32.757 回答
0

您的代码对我来说确实正确，看起来您确实忘记在 css 中添加 # 所以不是 header{} 而是 #header{} 因为它是 div id 而不是 header 标签

于 2013-10-18T16:20:27.570 回答