CODEWITHSUNDEEP
javascripthtmlcss
Ashok
Ashok

Reputation: 1952

keep div on top of the page while scrolling

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

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//

...

...

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

I would like to know if this is possible at all. I tried using CSS for div:

//CSS for div:

position: fixed;

width: 100;

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.

Upvotes: 1

Views: 4910

Answers (3)

Anurag Uniyal
Anurag Uniyal

Reputation: 88727

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

Upvotes: 1

Rayshawn
Rayshawn

Reputation: 2617

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.

Upvotes: 0

kgr
kgr

Reputation: 9948

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.

Upvotes: 0

Related Questions