Question

当你滚过它时，我一直在寻找将“div”粘贴到屏幕顶部，或者当div到达屏幕顶部时使div与页面一起滚动。

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

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

因此，当移除浮动时，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;
}

Answer 2

您可以为nav和content元素设置固定的margin-top值。像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，向上滚动时再返回。

将侧边菜单贴在上面

4 个答案: