仅在某些范围内滚动元素[重复]

Question

我正在构建以下布局，可以在这里查看：

http://www.freemicsnyc.com/Other%20Versions%20&%20Backup/FreemicsNJ/new_template.html

您会注意到带有星期几（星期一、星期二、星期三、..）的一个 div 不会随着页面的其余部分滚动，因为它使用以下 css 设置样式：

.column_headings{

    ...not important stuff

    position: absolute;
    margin: 416px auto 0 auto;
    left:0;
    right:0;
}

这种行为不是我想要的。

我想要的是，让该 div 像正常一样与页面的其余部分一起滚动，直到它到达视口的最顶部，此时它会像粘性标题一样停留在那里，作为其余部分内容在其下方滚动。

我需要视差滚动吗？查询？有没有办法只用 CSS 来做到这一点？

任何帮助将不胜感激！

Answer 1

您现在可以使用 jQuery 插件，例如：http://stickyjs.com/ 作为它的完整 css 实现，position: sticky 目前对浏览器的支持非常低。

Answer 2

用下面的代码替换你的 CSS 代码，看看是否有帮助：

CSS

  width: 970px;
  height: 60px;
  background: lime;
  text-align: center;
  white-space: nowrap;
  position: relative;
  margin: 0 auto 0 auto;
  left: 0;
  right: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  display: block;