Fixer une DIV en haut de page lors d'un défilemment de page
Bonjour,
Je cherche à fixer une div qui se trouve en bas de page lors du chargement et qui se fixe en haut de page lors du défilement de la page vers le haut.
J'ai cherché et j'ai trouvé. J'ai compris le code mais je comprends pas pourquoi il ne marche pas mon ordi avec firefox ni avec chrome. Pourtant le code marche dans les sandbox...
Quelqu'un peut-il m'aider ?
Voici le code :
HTML
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| <body onload="scrolled()">
<div id="GrandeIntro">
</div>
<div id="siteWrapper">
<header>
<div id="headerTop"></div>
<div id="Grandenavigation">
<nav>abcd</nav>
</div>
</header>
<section id="content">
<div></div>
</section>
</div>
</body> |
CSS
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| html, body {height:100%;margin:0;}
#GrandeIntro {
height:100%;
background : red;
bacground-size : cover;
}
#siteWrapper {
margin-top:-80px;
}
#siteWrapper header {
height : 80px;
background : blue;
}
#siteWrapper header.fixed {
position : fixed;
width : 100%;
top : 0;
left : 0;
}
#content {
padding : 60px 0;
background : grey;
}
#siteWrapper header.fixed #content {
margin-top : 80px;
}
#content div {
width : 80%;
height : 1500px;
margin : auto;
border : solid white 2px;
} |
JavaScript
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| // Retourne le premier élément dans le document (en partant du premier niveau du html et ordonné comme les éléments du document) qui correspond au groupe de sélecteurs passés en paramètre.
// Dans le cas présent : headerTop
var header = document.querySelector("#siteWrapper header");
function scrolled(){
// Hauteur de la fenètre de la fenètre, element.clientHeight hauteur intérieur d'un élément
var windowHeight = document.body.clientHeight,
// Nombre de pixel dont le contenu d'élément a défilé vers le haut, soit du body , soit de l'élément
currentScroll = document.body.scrollTop || document.documentElement.scrollTop;
header.className = (currentScroll >= windowHeight - header.offsetHeight) ? "fixed" : "";
}
addEventListener("scroll", scrolled, false); |
Par avance je vous en remercie.
Noël