JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<header>
        <div class="logocool" id="upperlogo">
            <img src="https://via.placeholder.com/57x55" alt="">
        </div>
        <span>Item</span>
    </header>
    <main></main>
    <script>
    </script>

CSS

header {
            position: fixed;
            background: lightsalmon;
            width: 100%;
            height: 55px;
            display: flex;
            align-items: center;
        }

        main {
            height: 400vh;
            background-color: lightblue;
        }

        /* Klasse des eigentlichen Bildes .upperlogo ist der div */
        .logocool {
            height: 55px;
            width: 57px;
            transition: all 0.7s;
            /* Bild zunaechst unsichtbar machen */
            width: 0;
            height: 0;
        }

        #upperlogo.visi {
            /* jetzt das Bild sichtbar machen */
            width: 50px;
            height: 50px;
        }
        
        .logocool img {
            width: 100%;
            height: 100%;
        }

JavaScript

window.onscroll = scrollFunction;
        function scrollFunction() {
            if (window.matchMedia('(min-width: 769px)').matches) {
                if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
                    document.getElementById("upperlogo").classList.add("visi");
                } else {
                    document.getElementById("upperlogo").classList.remove("visi");
                }
            }
        }