In order to have a sticky header you need these elements:
[html]
[/html]
and …
[css]
#header_nav {
width:100%;
height:100px;
background-color:#666;
position:fixed;
top:0;
left:0;
}
[/css]
… and …
[js]
$(function(){
$(‘#header_nav’).data(‘size’,’big’);
});
$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($(‘#header_nav’).data(‘size’) == ‘big’)
{
$(‘#header_nav’).data(‘size’,’small’);
$(‘#header_nav’).stop().animate({
height:’40px’
},600);
}
}
else
{
if($(‘#header_nav’).data(‘size’) == ‘small’)
{
$(‘#header_nav’).data(‘size’,’big’);
$(‘#header_nav’).stop().animate({
height:’100px’
},600);
}
}
});
[/js]
Guess what!? It works!
Don't Forget 