11525 sujets

JavaScript, DOM et API Web HTML5

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;
}
}
Modérateur
Sinon dans ton javascript tu inclus aussi cette hauteur dans ton if:
 if(heightScroll>=50 && heightScroll<=800)

Cdt
Meilleure solution