带有侧边栏的单滚动网页

Single-scroll webpage with sidebar

本文关键字：滚动 网页 单滚动 侧边栏      更新时间：2023-09-26

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

更新样式。将样式padding-left: 255px;添加到.水平

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

DEMO

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（来自文档）。

相关文章：