html

        <nav className={`nav ${show && "nav__black"}`}>
            <img
                alt="Netflix logo"
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/170px-Netflix_2015_logo.svg.png"
                className='nav__logo'
                onClick={() => window.location.reload()}
            />

            <img
                alt='User logged'
                src="https://occ-0-4796-988.1.nflxso.net/dnm/api/v6/K6hjPJd6cR6FpVELC5Pd6ovHRSk/AAAABbme8JMz4rEKFJhtzpOKWFJ_6qX-0y5wwWyYvBhWS0VKFLa289dZ5zvRBggmFVWVPL2AAYE8xevD4jjLZjWumNo.png?r=a41"
                className='nav__avatar'
            />

        </nav>

css

.nav{
    position: fixed;
    top:0;
    width: 100%;
    height: 30px;
    z-index: 1;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition-timing-function: ease-in;
    transition: all 0.5s;
    
}
.nav__black{
    background-color: #111;
}
.nav__logo{
    position: fixed;
    left: 40px;
    width: 80px;
    object-fit: contain;
}

.nav__avatar{
    position: fixed;
    right:40px;
    width:30px;
    object-fit: contain;
}

js

    useEffect(() => {
        window.addEventListener("scroll", () => {
            console.log("scrollY :", window.scrollY)
            if (window.scrollY > 50) {
                setShow(true);
            } else {
                setShow(false);
            }
        });
        return () => {
            window.removeEventListener("scroll", () => { });
        }
    }, []);