滚动时将 div 保持在页面顶部答案

【问题标题】：keep div on top of the page while scrolling滚动时将 div 保持在页面顶部
【发布时间】：2012-10-25 23:14:02
【问题描述】：

===================

名称：//html文本框//

age: //文本框//

//div//

//表格//

===================

假设上面是一个 HTML 页面。还假设该表至少有 50 行，以便可以滚动整个页面。目前，当我滚动页面时，整个页面（div、table）都会滚动。我希望 div 在滚动时位于页面顶部，如下图所示：

===================

//div//

...

//row21//

//row22//

...

===================

我想知道这是否可能。我尝试对 div 使用 CSS：

//div的CSS：

位置：固定；

宽度：100；

但是，它会准确地显示 div 的位置。但是，我想在滚动时将 div 移动到页面顶部。

谢谢。

【问题讨论】：

【解决方案1】：

这不是小事

我有一个小库可以为表头做这样的事情，我想你可以阅读源代码或按原样使用表

【讨论】：

【解决方案2】：

这在 CSS 中是不可能的。如您所知，您可以使用：

position: fixed

要使元素相对于浏览器窗口保持在同一位置，但要在滚动内容时将其移动到顶部，您需要使用 JavaScript。

您可能想查看this SO post 以了解如何实现该效果。

【讨论】：

【解决方案3】：

您需要将此添加到 css 中。

  top:100px;//adjust til the div is below the name and age section.
  position:fixed;

我想这就是你要找的。p>

【讨论】：

默认情况下，这将导致 div 将自身定位在 name 和 age 部分的顶部（覆盖它们），所以我认为这不完全是 OP 的想法。
我已经试过了。正如 KGR 指出的那样，这会将 div 移到姓名和年龄上方。
你可以通过调整 top 属性来定位它，到 name 和 age div 的高度，使其保持在它的下方。
@RayEatmon 这不是 OP 要求的。这个想法是首先让 div 在name 和age 下面，但在滚动时让它们滚动到窗口之外，让 div 保持在顶部。换句话说，这意味着top: 100px 或其他任何内容，但在滚动时将其更改为top: 0。这在纯 CSS 中是不可能的。
啊，我明白你的意思了，谢谢你的解释。