滚动时将div放在页面顶部

Question

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

名称：// html文本框//

年龄：//文本框//

// div //

//表//

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

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

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

// div //

...

...

...

// row21 //

// row22 //

...

...

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

我想知道这是否完全可能。 我尝试将CS​​S用于div：

// div的CSS：

位置：固定；

宽度：100;

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

谢谢。

Answer 1

这不是小事

• 您将需要使用JavaScript复制div并使其位置固定。
• 您将需要处理滚动事件以隐藏和显示固定的div

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

演示： http : //www.agyey.com/demo/stickyhead/demo.html
代码： https ： //bitbucket.org/anuraguniyal/stickyhead

Answer 2

单靠CSS是不可能的。 如您所知，您可以使用：

position: fixed

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

您可能想看一下这篇SO帖子 ，以了解如何实现该效果。

Answer 3

您需要将此添加到CSS。

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

我认为这就是您想要的。