javascript - 带侧边栏的单滚动网页

Question

如何将以下示例的页面内容 - http://jsfiddle.net/cq8dC/放置在侧边栏的右侧nav，而不是在其后面？

Answer 1

更新样式。将样式添加padding-left: 255px;到.horizo​​ntal

.horizontal 
{
    display: inline-block;
    padding-left: 255px;
    vertical-align: top;
    white-space: normal;
    width: 100%;
}

演示

Answer 2

jsFiddle 演示

首先，您应该为您的内容添加一个容器。我已经调用它了#Content。

然后我将这些样式添加到 CSS 中：

body {
    overflow: hidden;
}
#Content {
    left: 240px;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    overflow: scroll;
}

这使得#Content 占据页面中的其余位置并且可以自行滚动。

---

我还更新了JavaScript

根现在是 #Content 元素，我使用的是position()而不是offset()。我这样做是因为position() Get the current coordinates of the first element in the set of matched elements, relative to the offset parent（来自文档）。