Fixer une DIV en haut de page lors d'un défilemment de page

**clefs** · 04/08/2017, 21h00

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

**danielhagnoul** · 04/08/2017, 23h58

Voilà mon code de test, j'ai fait des modifications sur le CSS :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
 
                /* code du test */
                
                html, body {
                        height: 100%;
                        margin: 0;
                } 
                #GrandeIntro {
                        height: 100%;
                        background: red;
                        background-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;
                }
                #content div {
                        width: 80%;
                        height: 1500px;
                        margin: auto;
                        border: solid white 2px;
                }
                
                /* fin code du test */
                
  </style>
  <script>
    'use strict';
                
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        
      // code du test
                        
                        
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => {
                        
                        // code du test
                        
                        // 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
                        const
                                header = document.querySelector("#siteWrapper header"),
                                scrolled = ev => {
                                        let
                                                // Hauteur de la fenètre, element.clientHeight hauteur intérieur d'un élément
                                                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" : "";
                                };
                         
                        window.addEventListener( "scroll", scrolled, false );
                        
                        // fin code du test
                        
    }, false );
  </script>
</head>
<body>
 
	<div id="GrandeIntro">intro</div>
	<div id="siteWrapper">
		<header>
			<div id="headerTop">top</div>
			<div id="Grandenavigation">
				<nav>abcd</nav>
			</div>
		</header>
		<section id="content">
			<div>section</div>
		</section>
	</div>
 
</body>
</html>

**clefs** · 05/08/2017, 06h05

Bonjour à tous,
Bonjour Daniel,

Je te remercie de ta réponse. Je me réveille et j'ai juste copier ton code et cela fonctionne. Cet après-midi je vais essayer de le comprendre car il y a des choses nouvelles pour moi. Tant mieux, je vais apprendre et faire la comparaison entre ton code et le mien.
Je reviens vers toi pour te dire.
Merci encore.
Noël

Fixer une DIV en haut de page lors d'un défilemment de page

JavaScript

Vue hybride

Discussions similaires

Partager

Partager