滚动时将div保留在页面顶部

Question

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

名称：// html文本框//

年龄：//文本框//

// // DIV

// //表

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

将上述内容假设为HTML页面。还假设该表至少有50行，以便整个页面可以滚动。目前，当我滚动页面时，整个页面（div，表格）滚动。我想让div在滚动时位于页面顶部，如下图所示：

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

// // DIV

...

...

...

// // row21

// // row22

...

...

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

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

// div的CSS：

位置：固定;

宽度：100;

但是，它显示div的位置与之前的位置完全相同。但是，我想在滚动时将div移动到页面顶部。

感谢。

Answer 1

这不是一件容易的事

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

我有一个小型库来为表头做这样的事情，我想你可以阅读源代码或者使用as-it-is for a table

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

Answer 2

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

position: fixed

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

您可能需要查看this SO post以了解如何实现这种效果。

Answer 3

您需要将其添加到css。

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

我认为这就是你要找的东西。