Menu : décalage smooth

Bonjour tout le monde,

Je souhaiterais reproduire l'effet du menu sur ce site : https://amedeo.qodeinteractive.com/

Pour l'instant j'arrive à peu près au même effet, mon seul problème : tous les labels de menu se décalent en même temps lorsque j'en survole un.

Comment devrais-je procéder pour "bloquer" chaque label de menu comme dans l'exemple du lien au-dessus ?

En vous remerciant par avance !

Coucou Melvilu, inspire toi de ça (;

window.addEventListener('scroll', function(){
  if(this.scrollY >= 500) {
    document.querySelector('nav').style.position = "fixed";
  }
});

Bonjour Vzytoi,

Merci beaucoup pour votre réponse !

J'ai tenté votre solution, mais il doit me manquer quelque chose car ça ne fonctionne pas.

Pour tout avouer je suis très novice. Je n'ai pas l'habitude d'utiliser du JavaScript... De plus je suis sur un Wordpress et je galère un peu.

Voici le code css qui est appliqué à mon élément :

<code>.blog-filters {
font-family: Inconsolata,sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .3em;
line-height: 1.714em;
text-transform: uppercase;
text-align: center !important;
}

.blog-filters ul li a {
padding-right: 5px;
}

.blog-filters ul, .blog-filters ul li, .blog-filters ul li a {
display: inline-block;
white-space: nowrap;
overflow: hidden;
position: relative;
transition: color,padding .2s ease-out;
-webkit-transition: color,padding .2s ease-out;
}

.blog-filters ul {
list-style: none;
margin: -35px;
}

.blog-filters li {
text-align: -webkit-match-parent;
}

.blog-filters a {
overflow-wrap: break-word;
margin-block-start: 2.33em;
margin-block-end: 2.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

.blog-filters a:before{
content: " — ";
opacity: 0;
}

.blog-filters ul li.blog-filters a:before, .blog-filters ul li:hover a:before {
left: 4px;
}

.blog-filters a:hover:before{
opacity: 1;
padding-left: 15px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
</code>

Je peux insérer une balise script dans la page, mais je ne connais pas la nature de mon élément (ce n'est pas un "nav" je pense). De plus vous avez mis "if(this.scrollY >= 500)", mais je ne sais même pas de combien de px se décale mon élément.

Merci d'avance pour votre aide !