28111 sujets

CSS et mise en forme, CSS3

Styles pour sticky navbar ne s'appliquant pas

Bonjour,
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 */

Modifié par cpalo (19 May 2018 - 13:20)
Sujet clos
Aller à