在向下或向上滚动时重新调整徽标大小-jQuery

我需要一些简单的代码示例来重新调整logo的大小，比如当向下滚动时，将30px乘以30px，如果向上滚动或刷新页面，页面将恢复到原始大小，例如60px乘以60，并具有一些效果，比如褪色

---

谢谢

我想你想要像

您可以通过使用jquerylik来实现这一点

$(window).scroll(function(){ 
  if ($(this).scrollTop() > 10){  
   // x should be from where you want this to happen from top//
    //make CSS changes here

    $('.header').addClass("test");
      $('.logo').addClass("test");
  } 
  else{
    //back to default styles
    $('.header').removeClass("test");
      $('.logo').removeClass("test");
  }
});

HTML

下面是一个例子，

---

---

那么你被困在哪里了？？？@A.Wolff，喜欢你的评论（：

<header class="header">
    <img class="logo" src="http://www.skrenta.com/images/stackoverflow.jpg" />
</header>

* { margin: 0; padding: 0; }

body {
  height: 2000px;
}

.header {
   width: 100%;
  height: 60px;
  background: red;
  position: relative;

  -webkit-transition: linear .3s;
     -moz-transition: linear .3s;
      -ms-transition: linear .3s;
       -o-transition: linear .3s;
          transition: linear .3s;
}

.logo {
    height:60px;    
    width:auto;
    position: relative;

}

.test {
  height: 30px;
  position: fixed;
}

<header>
  <img src="http://precision-software.com/wp-content/uploads/2014/04/jQuery.gif" class="logo">
</header>

header {
  background: violet;
  position: fixed;
  width: 100%;
  height: 80px;
}
.logo {
  margin: 10px 20px;
  width: 60px;
  height: 60px;
}

(function($) {
  $(window).scroll(function() {
    if($(this).scrollTop() > 0) {
       $('header').stop().animate({ height: '50px' }, 400, 'linear');
       $('.logo').stop().animate({ width: '30px', height: '30px' }, 400, 'linear');
    }
    else { 
       $('header').stop().animate({ height: '80px' }, 400, 'linear');
       $('.logo').stop().animate({ width: '60px', height: '60px' }, 400, 'linear');
    }
  });
})(jQuery);