sticky nav fancy

by lovromar

HTML

<div id="header"><div id="logo">LOGO</div></div>
<h1>Better<span> The </span>Web</h1>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br /><br />
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet hendrerit risus. Integer vel imperdiet magna. Donec arcu nibh, molestie vitae diam eget, placerat fermentum justo. Donec dignissim vulputate posuere. Nunc ultrices, augue at hendrerit elementum, est mauris malesuada ante, vel tincidunt erat lectus vitae odio. Nunc in vestibulum magna. Sed vel nulla ultricies sapien rutrum fermentum. Donec porttitor, augue vel luctus dapibus, elit urna convallis mi, vitae accumsan enim quam at metus. Donec et urna id sapien euismod feugiat ac sed elit. Fusce convallis neque pulvinar, tristique odio in, vehicula turpis. Nunc aliquam tristique malesuada. Maecenas ut purus eget arcu euismod auctor id id purus. Integer consequat, nibh quis accumsan venenatis, metus odio accumsan velit, quis gravida nisl urna eget leo.
<br /><br />
Morbi gravida accumsan nunc, vitae pharetra metus pharetra eu. Donec fermentum turpis vitae magna placerat, a fringilla dolor congue. Donec imperdiet nunc nisl. Nullam lacinia mollis justo, eget posuere sapien porttitor sed. Pellentesque nulla libero, luctus ac erat in, aliquet pharetra libero. Mauris quis tellus in mi volutpat imperdiet. Sed lacus velit, aliquet id faucibus eu, ultricies vel ante. Nullam volutpat mattis sapien id adipiscing. Nam venenatis, quam in congue aliquam, nunc...

CSS

@import url(http://fonts.googleapis.com/css?family=Pacifico);
body{margin:0px; padding:0px;}
h1{font-family:Impact, Charcoal, sans-serif;}
h1 span{font-family: 'Pacifico', cursive; color:#1BC3CC}
#header{
    width:100%;
    background:#1BC3CC;
    color:#fff;
    padding:20px 0px;
    max-height:50px;
    overflow:hidden;
    text-shadow:1px 1px 1px #14A3AA;
    border-bottom:solid 3px #14A3AA;
}
#header.fixed{position:fixed; top:0px; background:#000; border-color:#1BC3CC; color:#1BC3CC; text-shadow:none;}

#logo{   
    margin-left:20px;
    font-size:20px;
    font-family: 'Pacifico', cursive;}

JavaScript

if ($("#header").is('*')) {
var elem = $('#header');
var offset = elem.offset();
var leftValue = offset.left;
var topValue =  offset.top + elem.height();
var width = elem.width();
$(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= topValue) {  
	 if ($('#header').hasClass('fixed')){	 
	 }else{
		$('#header').addClass('fixed');
		$('#header').css({
			top: '-60px',
			width:width,
		});
		 $('#header').animate({ 
   		top: '0',
   	}, 500, function() {	
			});
}
	} else {	
	if ($('#header').hasClass('fixed')){	 	
	$('#header').removeClass('fixed');
	$('#header').fadeOut('fast', function(){ 
	 $('#header').fadeIn('fast');
   	});
		}
    }
  });
}