How to fix header even though the page scrolls?

Fixing header at the top even though the page scrolls

We might have come across few websites were we notice that the header is fixed even though the page is scrolled. One of the familiar site which uses that is Quora http://www.quora.com.

I tried the simliar mockup of quora feed design using html & css.

Implementing Fixed Positioning

To fix the header at top, CSS positioning property is used as:

position: fixed;

Fixed positioning is relative to the containing viewport of the page. No matter, the page is scrolled element will be positioned at the same position.

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 50px;
    border-top: 2px solid #b92b27;
    border-bottom: 2px solid #ddd;
}
            

Github link: Github_page

Subscribe to Creative Technocrayts and be a part of growing community.

Mockup Image:

Visual mockup of the fixed header design.