Howtocreateananimatedstickyheader,with

CSS3andjQuery
BySaraVieiraPostedMay.08,2014Readingtime:2minutes

Trendscomeandtrendsgo.Theonesthatstickaroundthelongestdosobecausetheysolveaparticular
problem.Atrendthatspopularrightnowforthatveryreason,isstickyelements;elementsthatbehavenormally
untilwescroll,andthenmaintaintheirpresenceonthepagesomehow.
Thetrendstartedwithsidebars,butwhereitsreallygrowninpopularityisheaders.Why?Becauseheaderstend
tocontainnavigation,andpersistentnavigationispopularwithusers.
Inthistutorialwellcreateaheaderthatstickstothetopoftheviewport,butsothatitdoesntinterferewiththe
content,weregoingtominimizeitwhentheuserscrollsdownthepage.
Hereswhatitsgoingtolooklikewhenweredone:

Ifyoudliketofollowalongwiththecode,youcandownloadithere.

TheHTML
TheHTMLforourexampleisreallysimple,allweneedisanh1insideaheader.Belowthatwehaveanimageto
forcethepagetoscrollsothatwecantesttheeffect.

<header><h1>StickyHeader</h1></header>
<imgsrc="largeimage.jpg"width="782"height="2000"alt="BigImage"/>

ThejQuery
CSStransitionsarethebestwayofhandlingtheanimationportionofourstickyheader.AllwereusingjQueryfor
isdetectingthescrollpositionofthewindow.
Whenthescrollpositionofthewindowisgreaterthan1meaningthattheuserhasscrolleddownwardsthen
wewanttoaddtheclassstickytotheheader;otherwisewewanttoremoveit(ifitsthere).
Thismeanswellbeabletostyletheheaderbasedonwhetherthestickyclassisapplied.
$(window).scroll(function(){
if($(this).scrollTop()>1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});

TheimportantthingtonoteisthatusingjQueryinthiswaydegradesgracefully;ifJavaScriptisdisabled,the
navigationwillstillwork,theheaderwillsimplybestyledinthenonstickydefaultstate.

TheCSS
OurCSSisusedtostylethetwodifferentstates,thedefaultstate,andthestickystate;andtotransitionbetween
thetwostates.
Tostartwith,letsaddsomesimplestylesthatimprovethelookoftheheader:

header{
position:fixed;
width:100%;
textalign:center;
fontsize:72px;
lineheight:108px;
height:108px;
background:#335C7D;
color:#fff;
fontfamily:'PTSans',sansserif;
}

Nowforthefunpart:whentheuserscrollsdown,thestickyclasswillbeapplied,andwecannowstylethe
headerdifferentlytoreflectthatnewpriorityonthepage.Wealsosetthepositiontofixed,sothatwerenot
changingpositioningmidscroll.
Thereareseveralthingswewanttodo:first,wewanttochangethesizesothatitusesuplessscreenspace;we
alsowanttochangethecolorandaligntotheleftsothatvisuallyitdoesntinterferetoomuch:
header.sticky{
fontsize:24px;
lineheight:48px;
height:48px;
background:#efc47D;
textalign:left;
paddingleft:20px;
}

Naturally,whatyoudoherewilldependonthedesignyouretryingtoachieve.Youcandojustaboutanythingyou
like.
Ifyoutestthisnow,youllseethattheheaderchangesassoonaswescrolldown.
Now,toanimatethechange,allweneedtodoissetatransitionontheheader,likeso:
transition:all0.4sease;

Conclusion
CreatingthisanimatedheaderwithCSS3propertiesandtogglingtheclasswithjQueryisextremelysimpleand
addsatonofUXgoodnesstoyoursitedesign.
Whatsmore,thecodedegradesgracefully,sotherereallyisnodownsidetotheimplementation.