Menu
How would I go about keeping my header from scrolling with the rest of the page? I thought about utilizing frame-sets and iframes, just wondering if there is a easier and more user friendly way, what would be the best-practice for doing this?
518
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.
Here are three simple steps: Find the correct style so you can declare the element as sticky using position:sticky; (don't forget browser prefixes like position: -webkit-sticky; ). Choose the “sticky edge” (top, right, bottom, or left) for the item to “stick” to.
Note: This answer dates from 2010. Consider position: sticky in 2021, as mentioned in another answer.
Use position: fixed on the div that contains your header, with something like
#header { position: fixed; } #content { margin-top: 100px; } In this example, when #content starts off 100px below #header, but as the user scrolls, #header stays in place. Of course it goes without saying that you'll want to make sure #header has a background so that its content will actually be visible when the two divs overlap. Have a look at the position property here: http://reference.sitepoint.com/css/position
82
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
