仅在某些范围内滚动元素

Question

我正在构建以下布局，可在此处查看：

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

你会注意到一个星期几的星期一（星期一，星期二，星期三，......）不会滚动页面的其余部分，因为它的样式是以下css：

.column_headings{

    ...not important stuff

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

这种行为不是我想要的。

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

我需要视差滚动吗？ JQuery的？有没有办法只使用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;