Question

我正在尝试达到与此页面相似的效果

https://developers.google.com/web/tools/chrome-devtools/console/

，其中固定的侧边栏将独立于主体的滚动而滚动，并且还响应页脚。

就我而言，我有一个类似下面的代码

<body>
    <div>
        <div class="sidebar"> <!-- Fixed sidebar -->
        </div>
        <div class="content">
            <!-- Long article -->
        </div>
    </div>
    <div class="footer">
    </div>
</body>

如何使侧边栏滚动独立于身体的滚动？同样，页脚不应干扰固定的侧边栏。

Answer 1

如果您查看此页面的Google代码，则在滚动了一定数量以及将position: fixed值设置为标题高度后，您会发现该元素已设置为top

max-height随着窗口高度的降低而降低。

如果您对browser support感到满意，可以尝试position: sticky，尽管我仍然不建议这样做，因为它仍然仅与Firefox和Safari的最新版本真正兼容。

您必须将侧边栏设置为position: fixed并使用JavaScript滚动调整其位置值。或从一开始就将其设置为固定，并在页脚中使用z-index进行覆盖。

Answer 2

您可以使用此代码将元素固定到视口。

.sidebar {
  position: fixed;
  top: 100px; /* below the header */
  height: calc(100% - 200px); /* substract the height of the header and footer */
}

您应该查看CSS3 calc函数的以下答案：https://stackoverflow.com/a/14101451

独立的Div滚动和Body Scroll

2 个答案: