Question

我只是想建立一个网站。当我向下滚动到30px时，我认为如果我的标题缩小了一点点就会很好。当然，当我滚动到顶部时，它应该再次放大。这就是我的问题。我无法找到我如何再次增加标题！这是缩小效果的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);   
   }

})});

Answer 2

您可以简单地向主体（或#header）添加一个类，并为动画使用css过渡：

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; }

当我向下滚动并在向上滚动时将其放大时，如何缩小动画的标题？

2 个答案: