Menu en position fixed

Bonjour,

J'ai mon menu que j'ai mis en position fixed le soucis c'est que il reste fixe sur toute les pages, je voudrais qu'il soit visible juste au passage des pages. ( j'ai essayer avec sticky et je n'y arrive pas )

Pouvez vous m'aider ?

mon menu :

Code:

1
2
3
4
5
6
7
8
9
10
11
        <nav>
            <a href="index.php#home"><h2 class="logo">My<span>SITEWEB</span></h2></a>
            <ul>
                <li><a href="index.php#home" class="active">Home</a></li>
                <li><a href="index.php#about">À propos</a></li>
                <li><a href="index.php#home">Services</a></li>
                <li><a href="index.#price">Tarifs et forfaits</a></li>
                <li><a href="index.php#contact">Contact</a></li>
            </ul>
            <a href="index.php" class="btn">Home</a>
        </nav>

et mon js ici :

Code:

1
2
3
4
5
6
7
8
<script type="text/javascript">
    window.addEvenListener("scroll", function(){
        var nav = document.querySelector("nav");
        nav.classList.toggle("sticky", window.scrollY > 0);
    })
</script>
</body>
</html>

Mon css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
nav {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 45px;
    padding-left: 8%;
    padding-right: 8%;
}
 
.logo {
    color: white;
    font-size: 35px;
    letter-spacing: 1px;
    cursor: pointer;
}
 
span {
    color: #dc143c;
}
 
nav ul li {
    list-style-type: none;
    display: inline-block;
    padding: 10px 25px;
}
 
nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    text-transform: capitalize;
}
 
nav ul li a:hover,
nav a.active {
    color: #dc143c;
    transition: .4s;
}
 
nav.sticky .logo,
nav.sticky ul li a {
    color: #dc143c;
}
.btn {
    background-color: #dc143c;
    color: white;
    text-decoration: none;
    border: 2px solid transparent;
    font-weight: bold;
    padding: 13px 30px;
    border-radius: 30px;
    transition: .4s;
}
 
.btn:hover {
    transform: scale(1.2);
}