Bonjour, J’essaie de travailler sur une navbar propre sans contexte, pour la réutiliser facilement plus tard, et j’ai réussi. Voici son code :
<div class="navbar" id="navbar">
<div class="permanent">
<img src="../ressources/SVG_Logo.svg" alt="logo" class="logo">
<div class="burger" onclick="animer()">
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
</div>
</div>
<div class="menu">
<a href ="" class="bouton">Elément 1</a>
<a href ="" class="bouton">Elément 2</a>
<a href ="" class="bouton">Elément 2</a>
</div>
</div>
.navbar{
position: sticky; /* La propriété qui me pose problème */
position: -webkit-sticky;
top: 0;
width: 100%;
background-color: red;
.permanent{
width: 93%;
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.logo{
width: 15%;
}
.burger{
.trait{
display: block;
width: 30px;
height: 4px;
background-color: white;
transition-duration: 0.5s;
}
.trait:not(:last-child){
margin-bottom: 9px;
}
}
}
.menu{
display: none;
height: max-content;
transition-duration: 0.5s; /* L'autre ligne qui me pose problème */
position: fixed;
width: 100%;
background-color: inherit;
.bouton{
text-align: center;
text-decoration: none;
color: white;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
}
.montrer{
/* Affichage du menu quand on clique sur le burger */
display: flex;
flex-direction: column;
}
}
.montrer est la classe qui est retirée ou non au menu, avec une ligne JS, pour afficher ou non ce menu.
la div .navbar n’est pas dans le header, mais dans le main (qui du coup est séparé avec un main_contenu et main_pied car sinon, sa propriété position: sticky ne s’applique pas correctement (portée limitée au wrapper où est la div, ici ça serait portée limitée au header. 
)
Donc j’ai bien le comportement attendu, ma div .navbar rouge en haut, qui passe par dessus le contenu quand je scroll. La classe .menu s’affiche bien par dessus le contenu, sans le décaler (grâce à position: fixed) A un soucis prêt : je n’ai pas de transition fluide pour faire apparaître le menu, malgré transition-duration: 0.5s; qui fonctionne pour le burger;
Mais ce n’est pas mon soucis principal…
Comme c’est une navbar, le but c’est quand même d’avoir la même sur toutes les pages. Mais je n’ai pas envie de la copier-coller sur chaque page… Imaginiez si j’ai beaucoup de pages (genre un site de news, avec une page par news ?) et que je dois modifier cette navbar ? Quel enfer !
Du coup, j’essaye de mettre ma navbar dans un fichier à part, puis de l’importer avec jQuery. Après avoir essayé ça, le html d’une page ressemble à :
<html lang="fr">
<head>
<!-- Infos page -->
<meta charset="utf-8">
<title>Page par défaut</title>
<!-- CSS -->
<link rel="stylesheet" href="../css/navbar.css">
<!-- JS -->
<!-- API -->
<script src="../js/API/jquery-3.6.0.js"></script>
<!-- scripts perso -->
<!-- Inclusion de la navbar -->
<script>
$(function(){
$("#navbar").load("common/navbar.html" + "#navbar");
});
</script>
</head>
<body>
<main>
<div id="navbar"></div>
<div class="main_contenu" style="margin: 1em;">
<p>01. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis doloremque soluta odio optio ipsa accusamus omnis deserunt adipisci est error dolor, voluptatibus repellendus repellat magni provident reiciendis ex blanditiis culpa.</p>
<p>02. Lorem ipsum dolor sit amet consectetur adipisicing elit. At sit perspiciatis non maiores numquam mollitia eaque voluptates laboriosam nihil? Facilis numquam placeat enim, sapiente ex in cumque est error officia?</p>
<p>03. Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt veniam architecto dolores maxime sed fugit! Molestiae dolor quaerat, delectus non, voluptatibus in maiores eveniet nisi suscipit eligendi accusantium, cum molestias!</p>
<p>04. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, perferendis. Sed iste perferendis cumque minus sint quo cupiditate inventore recusandae quam sapiente repellendus provident commodi incidunt, atque odit numquam maxime.</p>
<p>05. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, nisi nobis quaerat, nulla officiis quisquam deleniti ipsum architecto adipisci, aliquid repellendus laudantium at pariatur libero repellat quibusdam dicta asperiores neque.</p>
<p>06. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum facilis tenetur modi maxime vel alias quasi non quaerat nam, quidem architecto animi laborum repellendus corrupti reprehenderit velit atque, iste laudantium?</p>
<p>07. Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi provident iusto atque deserunt ducimus eligendi culpa tenetur laudantium minus nostrum ipsum rem nam distinctio quaerat, id error non ea et!</p>
<p>08. Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam dolorum, repellendus alias sapiente officia reiciendis corporis ab adipisci magnam voluptatibus amet! Iste eaque ullam culpa asperiores cumque expedita saepe molestiae?</p>
<p>09. Lorem ipsum dolor sit amet consectetur adipisicing elit. In dicta amet voluptatum quisquam vel sunt mollitia iure, atque pariatur modi architecto earum ab iste illo a. Laboriosam, nisi. Accusamus, odit?</p>
<p>10. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae dolorem doloribus iusto eaque veniam rerum? Magnam voluptatem alias voluptatum? Asperiores sit saepe dignissimos necessitatibus libero tenetur cupiditate numquam ea laudantium?</p>
<p>11. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis cumque reiciendis obcaecati perferendis. Porro, consectetur accusamus minima vero quae ratione, adipisci assumenda doloremque omnis quaerat culpa odio officiis aspernatur harum.</p>
<p>12. Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, nemo inventore necessitatibus explicabo nisi accusamus deserunt voluptates, tempore, culpa in incidunt consequuntur dolores nulla laudantium adipisci odit officia quas dolorem.</p>
</div>
<div class="main_pied">
</div>
</main>
</body>
</html>
Ce qui fonctionne, j’ai la navbar qui s’affiche là où il faut, avec toutes les propriétés CSS qu’il faut, hormis une : La navbar n’est plus sticky !
Quelle peut être la raison ? Pourquoi certaines propriétés CSS sont appliquées à ma navbar "importée" et pas d’autre ?
Le problème est "résolu" en ajoutant style="position: sticky; top: 0;" à la div avec la classe navbar, mais je n’aime pas cette solution, j’ai l’impression de mettre une bâche par dessus un trou au lieu de le combler en comprenant ce comportement.
Merci pour les avis !
(même si ça m’aiderait beaucoup de maîtriser les bases de cet outil, ne serait-ce que pour le multi-langue.)
