Supprimé fonctionnalité sticky js responsive

Salut,

J'ai créé un menu sticky double nav pour le côté desktop jusqu'ici tout va bien.

J'aimerais que la fonctionnalité sticky ne fasse plus son effet à partir de 800px.
Et c'est là où je bloque en css je n'arrive pas à supprimer l'effet.
Quelqu'un pour me pister une solution ?

Code js sticky

const firstNav = document.querySelector('.header');

window.addEventListener('scroll', () =>{
    const heightScroll = window.scrollY;

    if(heightScroll>=50){
        firstNav.classList.add('sticky');
    }else{
        firstNav.classList.remove('sticky');
    }
});

CSS

.first-header{
    border-bottom: 1px solid #dddddd;
    background-color: c.$light;
    padding: 2rem 4rem;
    transition-duration: 0.3s;
}


.first-header.sticky{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    padding: 1rem 4rem;
}

Modifié par tc-web (05 Aug 2023 - 11:25)

en css
en dessous de 800px c'est désactivé

.menu {
position: sticky;
top: 0;
left: 0;
}
@media only screen and (max-width: 800px) {
.menu {
position: static;
}
}