index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Home | Netflix</title>
    <link rel="stylesheet" href="style.css">
    <script src="script2.js"></script>
</head>

<body>
    <div class="nav">
        <div class="nav_left">
            <img class="nav_logo" src="images/netflix logo.png" alt="">
        </div>
        <div class="nav_right">
            <img class="nav_avatar" src="images/Netflix-avatar.png" alt="">
        </div>
    </div>

    <!--Banner-->
    <header id="banner">
        <div id="banner_contents">
            <h1 id="banner_title"></h1>
            <div id="banner_buttons">
                <button id="banner_button">Play</button>
                <button id="banner_button">My List</button>
            </div>
            <p id="banner_description"></p>
        </div>
        <div id="banner_fadeBottom"></div>
    </header>

    <!--row-->
    <div id="headrow">
        <div class="row">
            <h2 class="row_title"></h2>
            <div class="row_posters"></div>
        </div>
    </div>

    <script>
        window.addEventListener("scroll",function(){
            var nav = document.querySelector(".nav");
            nav.classList.toggle("active",window.scrollY > 0);
        })
    </script>
</body>

</html>