只在一定范围内滚动元素

Scroll an element only within some bounds

本文关键字：滚动 元素 范围内      更新时间：2023-09-26

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

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

你会注意到一个包含星期(星期一，星期二，星期三，…)的div不会随着页面的其余部分滚动，因为它是用以下css样式的:

.column_headings{
    ...not important stuff
    position: absolute;
    margin: 416px auto 0 auto;
    left:0;
    right:0;
}

这种行为不是我想要的。

我想要的是，div像正常一样与页面的其余部分一起滚动，直到它到达视口的顶部，在这一点上，它会像一个粘头一样留在那里，因为其余的内容在它下面滚动。

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

任何帮助将非常感激!

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

将你的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;
相关文章：