It is becoming more and more popular to now have a sticky header and nav on your website. But what are these sticky elements? WEll let me explain in real easy terms. Sticky elements simply mean they stick to the screen, for example a sticky header and sticky nav will most of the time stick to the top of your window as you scroll down the page. Of course it does not have to be limitied to the top of your screen it can be on the sides or anywhere you need but “sticky” means exactly that they stick there.
How To Create a Sticky Header and Nav
So let’s create one of these sticky headers. As always we will make us just that little bit more fancy though. We will have it stick to the top but also use a little CSS3 transition to make it animate slightly as we shrink it in size to give our content as much room as we can.
The HTML is fairl basic we just mark up a usual header like so:
<header> <h1>STICKY HEADER & NAV</h1> <nav> <a href="#">HTML</a> | <a href="#">CSS</a> | <a href="#">JavaScript</a> | <a href="#">jQuery</a> </nav> </header>
To make sure we see the croll in place I have also created a large image that will mean you will have to scroll your window ad put that in place:
<header> <h1>STICKY HEADER & NAV</h1> <nav> <a href="#">HTML</a> | <a href="#">CSS</a> | <a href="#">JavaScript</a> | <a href="#">jQuery</a> </nav> </header> <img src="large-image.jpg" width="782" height="2000" alt="Big Image"/>
Now for some fairly simple CSS to style this up a bit. Of course colours and what not are completely up to you but just for nicety I have made mine a black strip header all centered that when we scroll down shrinks to a grey strip and smaller font size. I have also included my favourite font at the moment “Open Sans”. To get everything nullified in the first place I have also used Eric Myers reset CSS.
<!-- import Google font -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
body {
text-align: center;
background: #f5f5f5;
}
header{
text-align: center;
font-size: 35px;
line-height: 48px;
background: #000;
color: #fff;
font-family: 'Open Sans', sans-serif;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
header.sticky {
position: fixed;
font-size: 24px;
line-height: 30px;
width: 100%;
background: #333;
}
header nav {
font-size: 18px;
line-height: 22px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
header nav a {
text-decoration: none;
color: #F2F2F2;
}
header.sticky nav {
font-size: 14px;
line-height: 22px;
}
</style>
The most important parts you want to pay attention to here are the 2 transition statements in header nav and in header.sticky nav using this transistion code:
transition: all 0.4s ease;
What that tells it to do is animate the adjusted styles when they are changed over 0.4 seconds and easing. What we have set up is our basic header styles and then one with the class .sticky on the nav so taht when our nav becomes sticky we can adjust the styles. But how will our code know when the nav is to become sticky and add the class? This is where a little jQuery code comes in and does this for us. So first inclide your jQuery and good practise is to include this at the bottom of your page.
Using the $(window) decleration we can target the browser window then adding .scroll we can target when the window is scrolled. jQuery also has an attribute in it of .scrollTop which can detect if the scroll position is at the top. If we add an if statement in there for if the scroll position is greater than 1 (meaning the window has been scrolled) we can then add the class of .sticky else we remove the class.
<!-- import jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- write script to toggle class on scroll -->
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
</script>
Then that it is it hey presto! you have a sticky header in place that does a nice little transition to shrink up slightly. Of course you cna take that much further but as a starting point this should get you going.
As usual you can view my demo or download the files for your own use.