keep div on top of the page while scrolling

Question

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

Name: //html text box//

age: //text box//

//div//

//table//

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

Assume the above as a HTML page. Also assume the table has atleast 50 rows so that, the entire page could be scrolled. currently, when I scroll the page, the entire page (div, table) scrolls. I want the div to be at top of the page while scrolling such as the figure below:

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

//div//

...

...

...

//row21//

//row22//

...

...

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

But, it displays the position of the div exactly where it was earlier. But, I would like to move the div to the top of the page while scrolling.

Thanks.

Answer 1

This is NOT trivial

• You will need to use JavaScript to copy div and make its position fixed.
• You will need to handle scroll event to hide and show fixed div

I have a small library to do such thing for table headers , I think you can read the source code or use as-it-is for a table

demo : http://www.agyey.com/demo/stickyhead/demo.html
code: https://bitbucket.org/anuraguniyal/stickyhead

Answer 2

This is not possible in the CSS alone. As you already know you can use:

position: fixed

to keep the element in the same place with respect to the browser window, but in order to move it to the top when the content is scrolled you need to use JavaScript.

You may want to look at this SO post to get an idea how to achieve that effect.

Answer 3

You need to add this to the css.

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

I think that's what you are looking for.