JSFiddle - React, Tailwind, and code Playground

by apoca1ipsis

HTML

<a href="#" class="logo">
    <img src="https://help90.ru/image/cache/catalog/catalog/brauzery/google-chrome1-1000x1000.jpg" alt="">
    <div class="logo-mask"></div>
</a>

CSS

body {
        height: 10000px;
        background: #191919;
    }

    .logo {
        display: block;
        width: 100px;
        height: 100px;
        position: fixed;
        left: 40px;
        top: 40px;              
        overflow: hidden;        
   }
     .logo img {
        width: 100%;
        height: 100%;
    }
    
    .logo-mask {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: url("https://help90.ru/image/cache/catalog/catalog/brauzery/google-chrome1-1000x1000.jpg") no-repeat center bottom / 100% auto;
      filter: grayscale(100%);
      z-index: 2;
      
    }

JavaScript

$(window).scroll(function () {
            let scrollProgress = (100 - (($(this).scrollTop() / ($("body").height() - $(window).height())) * 100)).toFixed(0);
            scrollProgress = Math.abs(scrollProgress)
            //$(".logo").css("filter", "grayscale("+scrollProgress+"%)")      
            $(".logo-mask").css("height", scrollProgress+"%")    
        });