Javascript Img滚动调整大小

如何在鼠标滚动时调整标题中徽标（es宽度：100px）的大小

$（'.logo'）。滚动（函数（）{
$（此）。宽度（100）；
$（this）.off（）；//删除处理程序，使其只调整一次大小。。。
})

.header{
背景色：黑色；
}
.标志{
高度：100px；
宽度：100%；
背景图像：url（“http://unika.myarmah.it/skin/frontend/sns_simo/default/images/logo.png");
背景重复：无重复；
}

编辑：由于您希望它在滚动到页面顶部时返回，因此我添加了一个检查，以查看动画是否已发生，因为您不希望它不断触发。

只需使用javascript：

为什么因为它和使用jQuery一样短

更新#1- 在看到作者对上一个答案的评论后，我调整了我的示例，使其在页面顶部包含动画和重置。同样，只需使用javascript，为了获得更好的性能，请使用CSS类，以便在一个周期内完成所有绘制

更新#1 jsfiddle-

---

---

---

旧的JSFIDLE示例-

看看这里-如果我想添加动画，可以用于宽度一致吗？@yavonz15，我编辑了响应以使其成为动画。fanastic，当我返回首页时，如何恢复到原始大小？

var logoHasResized = false;
$(document).on('scroll', function (e) {
    if (window.scrollY == 0) {
        $('.logo').animate({'width': '100%'}, 250);
        logoHasResized = false;
    } else if (logoHasResized == false) {
        $('.logo').animate({'width': 100}, 250);
        logoHasResized = true;
    }
});

var logo = document.querySelector('.logo');

var handleResize = function(e) {
    if (document.body.scrollTop === 0) {
       logo.classList.remove("resize");
    } else {
       logo.classList.add("resize");
    }
};

document.addEventListener('scroll', handleResize);

<div class="header">
   <div class="logo">
   </div>
</div>

body {
  height: 9999px;
  overflow: auto;
}
.header {
  background-color: black;
}

.logo {
  margin-top: 200px;
  height:100px;
  width: 100%;
  background-color: red;
  background-repeat: no-repeat;
  transition: width 0.2s ease;
}

.logo.resize {
  width: 100px;
}