Menu
I've written an example here
http://jsfiddle.net/R9Lds/
I want a header bar on the top of the page.
<p style="vertical-align: middle; color: white">Head Bar</p>
And when user scrolls down and up, the header bar will always be on the top.
But now it has an issue that the bottom of the page will be cut-off.
Just like the example above, the
"Title 3",
"Content 3.",
"Author: Alex"
will be cut-off.
Anyone has any ideas about this issue?
Thanks in advance.
Eric
348
By setting postion: sticky and top: 0, we can create a fixed header on a scroll in HTML tables.
Answer: Use CSS fixed positioning You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.
If your header row locates on the top of the worksheet, please click View > Freeze Panes > Freeze Top Rows directly. See screenshot. Now the header row is frozen. And it will follow the worksheet up and down while scrolling the worksheet.
To freeze the row/column we can use a simple HTML table and CSS. HTML: In HTML we can define the header row by <th> tag or we can use <td> tag also. Below example is using the <th> tag. We also put the table in DIV element to see the horizontal and vertical scrollbar by setting the overflow property of the DIV element.
You actually can achieve it simpler than that. You only need to set your header div with position: fixed, and a 'push' div to, well... push the content down.
Take a look in this Fiddle
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
