Fixed headers

You may have noticed that there is a trend for fixed headers going around the internet. It’s generally a good thing too, having the navigation always accessible is certainly beneficial for the user experience along with always having the logo visible. There are times though when the screen real estate is more important, in fact this is important pretty much all the time, specially on mobile devices. There are a couple of different solutions to this problem but one of the best is the shrinking header.

This tutorial will involve some simple HTML and CSS plus a little jQuery. We will use these to create a simple layout with some basic styling, then once we add in the small bit of jQuery logic we can switch up the styles when the user scrolls down. You can check a demo here.

First off we will need some basic HTML in which to test. I’m going to be using the wonderful HTML5 Boiler Plate, which sets everything up for easy cross browser, standards compliant coding. If you haven’t already, get it. Then put this HTML into the content area.

<div id="wrapper">
    <header>
        <h1>Fixed Headers</h1>
        <nav>
            <ul>
                <li><a href="#link1">link1</a></li>
                <li><a href="#link2">link2</a></li>
                <li><a href="#link3">link3</a></li>
            </ul>
        </nav>
    </header>
        <section id="mainContent">
        <article id="link1">

        </article>
        <article id="link2">

        </article>
        <article id="link3">

        </article>
    </section>
    <footer>
    </footer>
</div>

This will form the base of our design and is a good base for most sites. Next up we need some CSS to fix the header in place and tighten everything up. It’s good to note that fixed elements are taken out of the normal flow of the HTML and will not move when the user scrolls. Being out of the flow means that the element will not naturally push the next siblings down the page, they will render on top of each other. To accommodate this we need to give the content below some top padding, otherwise it will be covered by the header. Add in the following CSS and then take a look at the effect, make sure to scroll.

#wrapper {
    width: 100%;
    max-width: 1000px;
    padding: 0;
    margin: 0 auto;
    position: relative;
}
header {
    height: 130px;
    background: #c3e1e5;
    position: fixed; /* this fixes the header in place at the top */
    width: 100%;
    max-width: 1020px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
}
header ul, header ul li, header h1 {
    float: left;
}
header ul li {
    list-style: none;
    margin: 20px;
}
#mainContent {
    min-height: 3000px; /* make sure there is room to scroll down */
    padding: 130px 10px 10px; /* top padding is to give the header clearance */
    width: 100%;
    background: #e6e6e6;
    margin: 0 0 20px;
}
footer {
    width: 100%;
}
    

As you can see we now have a very basic layout with a fixed header. On small screens this will take a lot of valuable space, bare in mind a 200px header on a screen that’s 320px high (a basic smart phone sideways) is a huge amount of space to be permanently take up by one element.

Lets add in the Javascript logic to reclaim the screen space. This jQuery script will add a class to the body tag when the user scrolls down. After this we will use some extra CSS styles to reduce the size of the header when this class is present on the body tag. By coding it in this way it becomes much easier to set styles for other elements besides the header should the need arise.

 

$(document).ready(function() {
    $(document).on('scroll', function() {
        var smallHeader = $(document).scrollTop();
        if (smallHeader > 30) {
            $('body').addClass('scrolled');
        } else {
            $('body').removeClass('scrolled');
        }
    });
});

Now when the user scrolls down beyond 30px the body has an extra class, “scrolled” and when the user scrolls up again it is removed. In order for this to have a visual effect we need to add a few more styles to the CSS we wrote earlier. Adding “.scrolled” to the beginning of the style declaration will override the normal header styles as the “scrolled” class is added to the body, which ranks higher than any of the previous styles. Try experimenting with other styles to see what can be achieved.

.scrolled header {
    height: 40px;
    padding: 10px;
}
.scrolled header h1, .scrolled header nav ul {
    font-size: 0.8em;
    margin: 0;
}
.scrolled header nav ul li {
    margin: 0 5px;
}

The CSS above will give the header a smaller height and shrink the text down so it still fits comfortably within the header. Check out the demo to see a more developed version. All I have done is add in more CSS styles and some Lorem ipsum place holder text. The jQuery remains exactly the same.

I hope you enjoyed this article and found it useful. Please leave a comment below if you liked it or have some alternate ways of handling this.

 

 

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>