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?
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 div
s overlap. Have a look at the position
property here: http://reference.sitepoint.com/css/position
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