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

时间:2012-10-25 23:14:02

标签: javascript html css

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

名称:// html文本框//

年龄://文本框//

// // DIV

// //表

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

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

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

// // DIV

...

...

...

// // row21

// // row22

...

...

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

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

// div的CSS:

位置:固定;

宽度:100;

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

感谢。

3 个答案:

答案 0 :(得分:1)

这不是一件容易的事

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

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

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

答案 1 :(得分:0)

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

position: fixed

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

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

答案 2 :(得分:0)

您需要将其添加到css。

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

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