Fixer un menu lors du scroll
Bonjour,
J'ai besoin de bloqué un menu qui se trouve en milieu de page en haut lors d'un scroll, je JS n'ai pas ma spécialité, j'ai trouvé un bout de code simple (je pensais) et dans une page html , ca marche pas... lol
Soit doit être tout bête, mais voilà.
Par contre, dans https://jsfiddle.net/, c’a marche bien par contre.
merci à vous.
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
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
| <style>
top {
height: 387px;
}
#content {
background-color: #999;
height: 900px;
width: 100%;
margin-top: 0;
margin-right: auto;
margin-left: auto;
position:relative;
z-index:2;
}
#menu2 {
background-color: #CCC;
height: 50px;
width: 100%;
margin-top: 10%;
position:relative;
z-index:3;
}
#menu2.fixed {position:fixed;width:100%;top:0;left:0;margin-top:0;}
#footer {
}
#nav {
padding: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
</style>
<body>
<div class="top">
top
</div>
<header id = "menu2">
menu 2
</header>
<section id ="content">
<div></div>
</section>
<footer id = "footer">
<h1> footer
</h1>
</footer>
</body>
<script>
var header = document.getElementById("menu2");
function scrolled(){
header.className = (window.pageYOffset >= document.documentElement.clientHeight) ? "fixed" : "";
}
addEventListener("scroll", scrolled, false);
</script> |
