CODEWITHSUNDEEP
javascriptjqueryjquery-animate
Xuryon
Xuryon

Reputation: 3

How can I shrink a header animated when I scroll down and enlarge it when I scroll up?

I'm just going to build me a website. I thought it would be nice if my header is shrinking a litte bit when I'm scrolling down to 30px. Of course it should enlarge again when I'm scrolling up to the top. And thats my problem. I can not find out how I increase the header again! Here is my jQuery Code for the 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 a Page on JSFiddle that I can show what i mean: http://jsfiddle.net/Xuryon/s46zzkt2/

I hope somebody knows how to solve that Problem...

Upvotes: 0

Views: 147

Answers (2)

superUntitled
superUntitled

Reputation: 22547

You could simply add a class to the body (or to the #header) and use a css transition for the animations:

http://jsfiddle.net/s46zzkt2/1/

js

 if (top > 30) { $('body').addClass('foo'); } 
 else { $('body').removeClass('foo'); }

css

#header { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
.foo #header { height: 50px; }

Upvotes: 1

hityagi
hityagi

Reputation: 5256

This should do it : 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 the above condition entry when top exceeds 30
       $("#header").animate({height:100}, 200);
       $("#header").animate({opacity:1}, 200);   
   }

})});

Upvotes: 1

Related Questions