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

时间:2013-10-18 16:00:17

标签: html css

我有一个要求让我们的移动webapps导航栏保持固定状态。这应该是如此简单,但是一旦我设置了位置:固定在包裹它的div上就会崩溃。

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

有趣的是,即将中间按钮单击解释为鼠标左键。

我发现了一个如此问题,提到固定不会工作,如果有变换。这固定实际上是固定的而不是绝对的,但我仍然得到上述问题。

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>
编辑:我只是在使用桌子,因为我无法正确截断中心文本并且是正确的长度,继续前进并且在下一个单元格下,仍在执行此操作。这些表不是必需的,我实际上更喜欢做标准的样式列表菜单,但我尝试了这个并且无法让它表现出来。

3 个答案:

答案 0 :(得分:1)

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

您是否将固定的顶部栏与页面内容的其余部分保持在包装内?

修改

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

它只会像这样工作:

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

答案 1 :(得分:0)

你的代码看起来对我来说是正确的,看起来你似乎忘了在你的css中添加#而不是标题{}它会是#header {}因为它是div id而不是标题标记

答案 2 :(得分:0)

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