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=""></a>

CSS

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

    .logo {
        display: block;
        width: 100px;
        height: 100px;
        position: fixed;
        left: 40px;
        top: 40px;
        filter: grayscale(100%);
    }

    .logo img {
        width: 100%;
        height: 100%;
    }

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+"%)")            
        });