Fixer un menu lors du scroll

**alain7321** · 14/12/2022, 11h19

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 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
<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>

**SpaceFrog** · 14/12/2022, 11h38

Jette un oeil par là
http://www.java2s.com/example/javasc...en-the-us.html

**alain7321** · 14/12/2022, 12h46

REbonjour,

Merci pour ta réponse, mais c'etait pas ma question :

Quand je mets mon script dans codepen.io, il marche --> https://codepen.io/alain7321/pen/bGKPOaN

mets quand je le met sur une page simple, ca marche pas...

--> https://www.espritmontagne.com/essai%20-%20Copie.html

**NoSmoking** · 15/12/2022, 11h46

Bonjour,

Quand je mets mon script dans codepen.io, il marche

ben non !!!

pas besoin de JavaScript, surtout celui que tu mets, le CSS suffit avec le positionnement sticky

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#menu2 {
  background-color: #CCC;
  height: 50px;
  width: 100%;
  margin-top: 10%;
/*  position: relative; /*-- OUT --*/
  z-index: 3;
  position: sticky;     /*-- la solution --*/
  top: 0;
}

**alain7321** · 15/12/2022, 15h44

Chez moi, cela marche...et sur différent navigateur...

et j'aimerai utiliser du js, car, en css, avec sticky, cela m'oblige a changé la structure.

**alain7321** · 15/12/2022, 16h14

Merci pour vos aides.

Je vais passer par la fonction

Sticky.js

Fixer un menu lors du scroll

JavaScript

Discussions similaires

Partager

Partager