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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 css : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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