javascript - 将侧面菜单粘贴到顶部

Question

我一直在研究当您滚动经过它时将“div”粘贴到屏幕顶部，或者当它到达屏幕顶部时使 div 随页面滚动。

我在尝试这个问题时遇到的问题是，使用 jquery 或简单的 css 更改为 position: fixed; 会从元素中删除 float 。

我的布局看起来有点像这样:http://jsfiddle.net/ThSXm/33/ <-- 已更新

因此，当 float 被移除时，id="content" 会与侧边菜单重叠，使侧边菜单变得更大且不合适。

我需要一个解决方案，您不必更改元素的位置，或者如果我可以对内容 div 进行一些修复，以便在更改位置时它不会重叠。

更新

Sandeeproop 设法帮助我定位，但滚动问题仍然是个问题。

正如我在这个问题的评论中提到的，当 div 接近顶部或到达顶部时，div 必须滚动/坚持到屏幕顶部(最好在 div 到达页脚或接近页脚)，因为在我们到达侧边菜单之前有更多的 div(页眉/幻灯片等)，如果您只使用 position: fixed，您将看不到菜单。

有什么想法吗？

/更新

期待一些答案!

//吉姆

Answer 1

如果我理解正确的话。请检查这个fiddle .

#nav {
  width: 136px;
  position: fixed;
  background: #FF0000;
  margin-left: 1em;
  margin-top: 1em;
}
#content{
  width: 80%;
  height: 600px;
  background: #FF9966;
  float: left;
  margin-left: 170px;
  margin-top: 1em;
}