Fixed header benefitsThe main benefit of fixed headers becomes obvious when browsing a site that has one: navigation. Especially with lengthy pages, a fixed header makes it easier to navigate to a different page without scrolling back up to the top of the site. This is especially important on one-page sites, so users can jump from section to section more quickly and efficiently.
to easily jump from one section to the next.
Fixed headers are very easy to implement. They can be accomplished with just CSS, making them a simple addition to a site. However, many sites take it a step further and add more advanced features. For example, take a look at Daniel Filler's portfolio site. As you scroll down, a condensed version of the site's header fades in at the top of the page. Simple effects such as this can be added to make a fixed header function more smoothly or to add more interactivity to a site.
A fixed header can also be used to help draw attention to branding. On many sites with fixed headers, not only is the navigation included, but the logo is as well. As a user is browsing your site, they will be consistently associating the content with your brand. The website Grain & Mortar takes this approach, with a fixed header that always includes their logo.
Fixed header design issuesOne of the biggest complications that you may run into when implementing a fixed header is screen space. It's important to take the overall design of your site into consideration, and determine if there is adequate space for a fixed header. It's important not to sacrifice design for a "cool" feature. If you know you want to implement a fixed header, first make sure your site will actually benefit from one, and then design your site in a way that will maximize the benefits of having a fixed header.
On some sites, fixed headers can be an intrusive feature, getting in the way of the content. You don't want the header to distract from the overall purpose of your site. Think about what your users' purpose may be, and what content they will be looking for on your site. Make sure your fixed header is helping them get to where they need to be instead of interfering.
Mobile devices need special attention as well for sites with a fixed header. There is a lot less screen space on mobile, so every pixel counts. If you know users will be accessing your site from a mobile device, take that into consideration. One solution may be to only have a fixed header on the desktop version of your site.
from desktop version (right) entirely.