javascript - 如何为垂直滚动设计一个卡住的左侧导航栏？

Question

如谷歌新闻或pulsme陆页。 显然，这样做的主要优点是当用户在主文档中向下滚动时，导航菜单仍然在屏幕上可见。 我试过 position:fixed对于 <td>元素。但问题是，当在移动设备(小屏幕)上查看页面时，文本与主要内容混合在一起。我同意不是表格的解决方案，但最好不要使用任何外部库。我也试过<iframe> ...但无法让它运行。谢谢!

Answer 1

最好的解决方案是在一个 div 中添加一个菜单，在另一个 div 中添加内容

<div id="menu">Some Menu Options</div>
<div id="cont">Your Content</div>

然后在 CSS 中

#menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 150px;
}
#content {
  position: relative;
  margin-top: 100%;
}

当然，您可以将 150px 替换为任何其他值。