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

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -