javascript - How can I shrink a header animated when I scroll down and enlarge it when I scroll up? -
i'm going build me website. thought nice if header shrinking litte bit when i'm scrolling down 30px. of course should enlarge again when i'm scrolling top. , thats problem. can not find out how increase header again! here jquery code shrink effect:
$(document).ready(function() { $(window).scroll(function() { var top = $(document).scrolltop(); if (top > 30) { $("#header").animate({height:50}, 200); $("#header").animate({opacity:0.5}, 200); $("#logoimage").animate({height:40}, 200); $("#logoimage").delay(20).queue(function() { $(this).css({'margin-top':'20px'}); $(this).dequeue();}); } })});
i've created page on jsfiddle can show mean: http://jsfiddle.net/xuryon/s46zzkt2/
i hope knows how solve problem...
this should : http://jsfiddle.net/gmdxs42t/
$(document).ready(function() { var fflag = true; $(window).scroll(function() { var top = $(document).scrolltop(); if (top > 30 && fflag) { fflag = false; //will stop re-entry on every px scrolled $("#header").animate({height:50}, 200); $("#header").animate({opacity:0.5}, 200); } if (top<30 && !fflag){ //will occur when scroll reached top fflag=true; //will enable above condition entry when top exceeds 30 $("#header").animate({height:100}, 200); $("#header").animate({opacity:1}, 200); } })});
Comments
Post a Comment