title: How to make image size change smoothly on scroll?
body: <p>I have header with big logo i want to make it small after scroll more than 100px, this is working fine but not smoothly, how can i do it smooth?</p>
  
  <p>My Code:-</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
      $(window).scroll(function(){
          if($(this).scrollTop() &gt; 100){
              $('header').addClass('fixed-header');
          }
          else{
              $('header').removeClass('fixed-header');
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;header&gt;
      &lt;div class="col-md-4"&gt;
        &lt;a href="#" class="logo"&gt;&lt;img src="https://www.freepnglogos.com/uploads/google-logo-png-hd-11.png"&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;div class="box-height"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>