【问题标题】：How to make image size change smoothly on scroll?如何使图像大小在滚动时平滑变化？
【发布时间】：2020-06-11 09:18:33
【问题描述】：

我有带有大徽标的标题，我想在滚动超过 100 像素后使其变小，这工作正常但不流畅，我怎样才能使其流畅？

我的代码：-

$(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100){
            $('header').addClass('fixed-header');
        }
        else{
            $('header').removeClass('fixed-header');
        }
    });
});

header{ padding:0px; position: sticky; top:0px; left:0px; background: #FFF; z-index: 1000;}
header.fixed-header{box-shadow: 20px 4px 10px rgba(39, 59, 69, 0.2);}

header .logo img{width:200px;}
header.fixed-header .logo img{width:100px;}

.box-height{ height:500px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
    <div class="col-md-4">
      <a href="#" class="logo"><img src="https://www.freepnglogos.com/uploads/google-logo-png-hd-11.png"></a>
  </div>
</header>

<div class="box-height"></div>

【问题讨论】：

标签： javascript jquery css smooth-scrolling smoothing

【解决方案1】：

你可以使用css的Transition Property：
https://www.w3schools.com/cssref/css3_pr_transition-property.asp\

 header .logo img{width:200px;transition:width 0.3s ease-in-out 0s;}

【讨论】：

【解决方案2】：

解决方案

transition: all linear .5s

说明

您可以查看 CSS 中的 transition 属性。

考虑到上面的解决方案，这里是语法的分解：

1) transition-property：定义你想要动画的属性。可以是单个属性、多个属性或all;
2）transition-timing-function：要使用的过渡函数，它将定义动画将如何发生；
3）transition-delay：定义动画需要多长时间才能完成；

参考文献

Using CSS transitions

示例

$(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100){
            $('header').addClass('fixed-header');
        }
        else{
            $('header').removeClass('fixed-header');
        }
    });
});

header{ padding:0px; position: sticky; top:0px; left:0px; background: #FFF; z-index: 1000;}
header.fixed-header{box-shadow: 20px 4px 10px rgba(39, 59, 69, 0.2);}

header .logo img{width:200px; transition: all linear .5s}
header.fixed-header .logo img{width:100px;}

.box-height{ height:500px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
    <div class="col-md-4">
      <a href="#" class="logo"><img src="https://www.freepnglogos.com/uploads/google-logo-png-hd-11.png"></a>
  </div>
</header>

<div class="box-height"></div>

【讨论】：