Background pour barre de nav

MatVim
Les bases HTML/CSS

Décrivez ici votre problème ou ce que vous cherchez à faire.
Bonjour a tous je fait du html et css depuis peu j'essaye d'apprendre et j'aime beaucoup sa. J'ai chercher comment faire une barre de navigation pour mon site internet qui soit fixe sur la fenètre et qui soit transparente en haut de page puis avec fond couleur unis en scrollant

Html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>>Mat Info</title>
    <link rel="stylesheet" href="CSS/styles.css">
    <script>
        src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
    <link rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
    integrity="sha384-
    lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
    crossorigin="anonymous">
</head>
<body>
    <section class="Accueil">
        <header>
            <!-- <img src="/images/ordinateur logo.png" alt="Icone Ordinateur"> -->
            <nav>
                <div class="symbole">
                <img src="/images/ordinateur logo.png" alt="Icone Ordinateur">
                </div>
                <div class="menu">
                <ul>
                <li><a href="index.html">Accueil</a></li>
                <li><a href="">Informations</a></li>
                <li><a href="prestations.html">Prestations</a></li>
                <li><a href="projets.html">Projets</a></li>
                <li><a href="images.html">Images</a></li>
                <li><a href="contact.html">Contact</a></li>
                </ul>
                </div>
            </nav>

        </header>
        <div class="boxaccueil">
        <div class="title">
            <img src="/images/logo couleur transparent.png" alt="logo Mat Info">
        </div>
            <div class="info">
                <p>Site actuellement en travaux !</p>
            </div>
        </div>
    </section>
    <section class="information">
        <div class="titreinfo">
            <h1>Informations</h1>
        </div>
        <p></p>
    </section>

    <section class="footerbas">
        <footer>
            <p class="copyright">
                &copy; 2022 - Mat Informatique. Tous droits réservés.
            </p>
            <a href="">Crée par Matiss Vimeux</a>
        </footer>
        </section>      

<script>

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

})

</script>        

</body>
</html>

Styles

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2? family= Abril+Fatface & display=swap');

*{
 font-family: Montserrat;
}

html {
    scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;
}

/* Barre De Navigation */

header {
    width: 100%;
    background: url(../images/fond\ accueil.png);
    background-size: cover;
}

nav {
    position: fixed;
    width: 100%;
    margin: 15px;
}

nav ul {
    text-align: center;
}

nav ul li {
    display: inline-block;
    padding: 20px;
}

nav ul li a {
    text-decoration: none;
    color: white;
}

.symbole img{
    position: fixed;
    float: left;
    width: 100px;
}

nav.scroll li{
    background: #000;
}

@media screen and (max-width: 800px) {
    nav {
        font-size: 12px;
    }
    nav ul li {
        padding: 6px;
        padding-top: 20px;
    }
}

/* Acceuil */

section.Accueil {
    background: url(../images/fond\ accueil.png);
    background-size: cover;
    background-position: center;
    height: 1000px;
}

.title img{
    width: 40%;
    margin: 150px;
    padding-top: 120px;
}

.info {
    text-align: center;
    font-size: 50px;
    font-weight: 800;
    color: rgb(80, 80, 80);
}

@media screen and (max-width: 920px) {
    .info {
        font-size: 40px;
    }
}

@media screen and (max-width: 502px) {
    .info {
        font-size: 25px;
    }
}

Ce que je veux

Donc je cherche a obtenir une barre de navigation transparente en haut de page puis avec fond noir en déroullant

Ce que j'obtiens

Mon problème actuellement est que la barre reste transparente et ne prend pas de fond noir en déroulant. Je viens donc vous demandez votre aide

Aucune réponse