Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to keep the header static, always on top while scrolling?

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?

like image 518
David Avatar asked Aug 29 '10 05:08

David


People also ask

How do I keep my table header fixed while scrolling in HTML?

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.

How do I make my header sticky?

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.


1 Answers

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

like image 82
Yi Jiang Avatar answered Oct 13 '22 08:10

Yi Jiang