将侧面菜单固定在顶部

Question

我一直在考虑在您滚动过去时将“div”粘贴到屏幕顶部，或者在页面到达屏幕顶部时让 div 与页面一起滚动。

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

我的布局有点像这样：http://jsfiddle.net/ThSXm/33/ 更新

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

我需要一个解决方案，您不必更改元素的位置，或者如果我可以对内容 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;
}

Answer 2

您可以为导航和内容元素设置固定的上边距值。 类似http://jsfiddle.net/ThSXm/26/

#nav {
    width: 15%;
    height: 100%;
    float: left;
    background: #FF0000;
    margin-left: 1em;
    margin-top: 60px;
}
#content{
    width: 80%;
    height: 600px;
    background: #FF9966;
    float: left;
    margin-left: 1em;
    margin-top: 60px;
}

Answer 3

我猜你正在寻找的是“位置：粘性”。 许多浏览器尚不支持此功能，但这里有一个 pollyfill http://philipwalton.github.io/polyfill/demos/position-sticky/

Answer 4

您是否考虑过在元素上使用 position:absolute 的解决方案？ 让它保持绝对，直到你需要它坚持然后将其更改为固定。

这是一个简单的小提琴： http://jsfiddle.net/dXe97/

if ($(this).scrollTop() > boxTop) {
$box.css({
    'position':'fixed',
    'top': 0
    });
}else{
$box.css({
    'position':'absolute',
     'top': 150
});
};

.box 元素是绝对定位的，但是当您向下滚动通过该元素时，它会更改为固定并且其顶部值设置为 0，并且在您向上滚动时再次返回。