website resize image on scoll

[wilcar]

I would like some images to be reduced when scrolling down to facilitate the reading of web pages.
I found this on stack overflow :
https://stackoverflow.com/questions/60431903/how-to-make-image-size-change-smoothly-on-scroll
This is what I want, except for the shadow.

When I copy the script in quarto (I use R studio) :

          <script>
          $(function(){
              $(window).scroll(function(){
                  if($(this).scrollTop() > 100){
                      $('header').addClass('fixed-header');
                  }
                  else{
                      $('header').removeClass('fixed-header');
                  }
              });
          });
          
          </script>           
         
          <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>

and add the css part to my stylesheet:

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

the image appears very large and does not shrink when scrolling.

Translated with www.DeepL.com/Translator (free version)

[mcanouil]

Could you provide a fully (small) reproducible example?