11484 sujets

JavaScript, DOM et API Web HTML5

Sticky NavBar ne fonctionnant pas si le css est dans un fichier extern

Bonjour,
Je reprends mon post que j'avais mis dans la catégorie css, car c'est sans doute plus un problème de script.
J'ai fait une sticky navbar suivant le scroll (cf W3C).
Pas de problème cela fonctionne si le code css rajouté par le script n'est pas dans un fichier externe.
Le fichier js :

window.onscroll = function() {myStickyNavBar()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myStickyNavBar() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Le fichier css qui fonctionne si dans le head de la page :

<style>
.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
.sticky + .content {
  padding-top: 60px;
}
</style>
<head>

Ce qui ne fonctionne pas:

<link rel="stylesheet" href="css/sticky-navbar.css"> 
</head>

Dans sticky-navbar.css

.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
.sticky + .content {
  padding-top: 60px;
}
body { color: green; } /* pour tester si le lien s'effectuait bien avec la feuille de style: ce qui est le cas */


Cordialement
Modérateur
Bonjour,

Je pense plutôt a un problème de priorité entre CSS (si on écarte l’hypothèse que le path de votre fichier CSS n'est pas le bon).

Qu'est-ce qui s'affiche dans l'inspecteur de code ? Vous voyez biens les propriétés ? Avec quoi rentre elle en conflit ? Vous avez un CSS de base ?
Sujet clos
Aller à