Javascript 仅在某些范围内滚动元素

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

你会注意到一个div和一周中的几天，周一，周二，周三。。不会与页面的其余部分一起滚动，因为它使用以下css设置样式：

.column_headings{

    ...not important stuff

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

这种行为不是我想要的

我想要的是，该div像普通一样与页面的其余部分一起滚动，直到它到达视口的最顶端，在这一点上，它会像一个粘滞的标题一样停留在那里，因为其余的内容在它下面滚动

我需要视差滚动吗？JQuery？有没有一种方法可以只用CSS来实现呢

---

任何帮助都将不胜感激

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

将您的css代码替换为以下代码，看看是否有帮助：

CSS

---

@Mary624我已经试过了，通过修改上面的代码，它对我起了作用，仍然有任何问题可以问。谢谢divy3993。我已经尝试过在代码中进行交换，但它只会将元素带到顶部。我试图滚动页面，直到它到达顶部，然后留在那里，因为其他内容一直滚动到404错误的链接下。请同时提供图片。

  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;