$(windows).on('scroll', function(){
            if($(window).scrollTop()) {
                $('nav').addClass('scroll');
            }
            else {
                $('nav').removeClass('scroll');
            }
        });

header {
  width: 100%;
  height: 100vh;
  background-image: url("./assets/header.png");
  background-size: cover;
  background-position: center;
}

nav {
  position: fixed;
  width: 100%;
}

nav.scroll ul {
  background-color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
        <nav id="header_frame">
            <div class="hamburger">
                <i class="fa-solid fa-bars"></i>
            </div>

            <div class="menu">
                <ul>
                    <li> <a href="#"> Le coté Lumineux </a> </li>
                    <li> <a href="#"> Le coté Obscur </a> </li>
                    <li> <a href="#"> L'empire </a> </li>
                    <li> <a href="#"> les Droïdes </a> </li>
                    <li> <a href="#"> Les Ewoks </a> </li>
                    <li> <a href="#"> Jabba Le Hutt </a> </li>
                </ul>
            </div>
        </nav>
    </header>