JSFiddle - React, Tailwind, and code Playground

HTML

<body>
            <div id="test"></div>
        </body>

CSS

* {
                margin: 0;
                padding: 0;
            }

            body {
                height: 2000px;
                width: 100%;
            }

            #test {
                width: 200px;
                height: 200px;
                background-color: red;
                position: fixed;
             }

JavaScript

document.addEventListener('scroll', function(e) {
            if (document.body.scrollTop > 400) {
                var currScrollPos2 = document.body.scrollTop;
                document.getElementById('test').style.opacity = -currScrollPos2/400 + 2;
                }
            });