javascript - 如何在向下滚动时缩小动画标题并在向上滚动时放大它？

Question

我只是要建立一个网站。我想，当我向下滚动到 30 像素时，如果我的标题能缩小一点就好了。当然，当我向上滚动到顶部时，它应该再次放大。这就是我的问题。我不知道如何再次增加标题!这是我的收缩效果的 jQuery 代码:

$(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();});

   }

})});

我在 JSFiddle 上创建了一个页面，我可以展示我的意思:http://jsfiddle.net/Xuryon/s46zzkt2/

我希望有人知道如何解决这个问题......

Answer 1

这应该可以做到: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);   
   }

})});