使元素固定位置，但如果内容太大，则跟随页面滚动

Question

请查看此网页。

1. 首先尝试滚动页面，查看左侧的栏是否保持不变。
2. 调整窗口的高度，使得左侧栏的所有内容都不可见。现在滚动，这次左侧栏不会固定。

在此页面中，有一个 jQuery 计算左侧栏的高度，将其与窗口高度进行比较，并使左侧栏位置固定或绝对。

然而，我想知道是否可以通过仅使用 HTML 和 CSS 来实现类似的效果，而不是使用 jQuery 或类似的框架。

有什么建议吗？ 简而言之，我正在寻找一个带有内容的栏，其内容保持固定，但如果内容超过，则会滚动。但滚动应与整个页面一起。

- Matsemann

---

这听起来像是绝对和相对定位，而不是固定定位。 - Jeremy Holovacs

@JeremyHolovacs 你为什么这么说？我想要的是将bar的位置设置为fixed，但如果内容太大，我就看不到它了。 - Matsemann

我不是媒体查询方面的专家，但你可以看一下这个链接——将CSS直接应用于特定的屏幕尺寸，这样如果屏幕太小，你就可以使用同一个样式表。http://css-tricks.com/css-media-queries/ - Raekye

如果你正在跟随页面滚动，那么它并不是固定的；固定是指屏幕，而不是内容。 - Jeremy Holovacs

@JeremyHolovacs 你有没有看过网页？只要内容不超过列的高度，它就是固定的，否则它是可滚动的。 - Christoph

Answer 1

您可以使用媒体查询来指定CSS在特定的屏幕尺寸（和其他情况）下使用，因此如果屏幕尺寸太小，您可以使用一个样式表。我不是专家，没有示例，但是在这里看看http://css-tricks.com/css-media-queries/。抱歉！但我想您已经理解了 :)

编辑：工作结果如下：

#leftnav {
    /* default look */
    width: 300px;
    position: fixed;
    top:0;
    height: 100%;
}

/* set the size at which the content is clipped and we cannot have fixed position */
@media all and (max-height: 500px) {
    /* things inside here will only have an effect if the browser window shows
       less than 500 px in the height, so here I apply the special rules */
    #leftnav {
        position: absolute;
        height: auto;
        /* etc.. */
    }
}

- Raekye