仅在某些范围内滚动元素

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 像正常情况一样与页面的其余部分一起滚动，直到它到达视口的最顶部，此时它会像粘滞的一样停留在那里header 因为其余内容在其下方滚动。

为此我需要视差滚动吗？ 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;

仅在某些范围内滚动元素

Scroll an element only within some bounds

javascript

jquery

html

css

parallax