位置:固定在我的导航栏上 中断滚动



我有一个要求让我们的移动网络应用程序导航栏保持固定。这应该很简单,但是一旦我设置位置:固定在包裹它的div上,一切都崩溃了。

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

有趣的是,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>

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

您没有发布其余代码,但对我来说似乎很好。下面是一个示例:http://jsfiddle.net/t3uxS/

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

编辑

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

它只会像这样工作:

<div id="header">
</div>
<div class="content">
</div>

你的代码对我来说看起来确实正确,看起来你确实忘记在你的 CSS 中添加一个 #,所以它不是 header{},而是 #header{},因为它是一个div id 而不是一个标题标签

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

最新更新