javascript - jQuery - Sticky header that shrinks when scrolling down -
i wonder how make sticky header shrink(with animation) when scroll down page , goes normal state when page scrolled top. here 2 examples clearify:
http://themenectar.com/demo/salient/
http://www.kriesi.at/themes/enfold/
i part make fixed, how should shrink header when user scrolls down?
thanks ton
this should looking using jquery.
$(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); } } });
demonstration: http://jsfiddle.net/jezzipin/jj8jc/
Comments
Post a Comment