Header fixe qui saute pendant le scroll

**Astumap** · 18/09/2019, 10h04

Bonjour,

Je débute en CSS et je réalise actuellement un nouvel intranet pour l'association où je travaille.

J'ai mon header que je souhaite garder fixe, pour que quand on fait défiler le reste du site, celui-ci passe sous le header. Pour cela, j'ai réussi.
Néanmoins, un petit souci me chagrine, c'est que lorsque l'on scroll, le header se décale vers le bas, laissant apparaître en haut le contenu qui défile, avant de se replacer dans sa position initiale.
Je précise que tout ceci se déroule en une fraction de seconde. Ce n'est pas dramatique, mais si vous pouvez m'aider à corriger le problème, ce n'est pas de refus.

Je ne peux pas vous montrer le site en exemple, mais voici un bout du CSS :

Code :

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
 
body
{
background-color:#0D71A4;
margin:0;
padding:0;
}
 
#header
{
width:1200px; 
height:120px;
left:50%;
margin-left:-600px;
background: linear-gradient(90deg,#b5e655 0%, #ffffff 6%, #ffffff 50%, #ffffff 94%, #b5e655 100%);
border-radius:30px 30px 70px 70px;
box-shadow: 0px 3px 15px #003889;
position:fixed;
z-index:10;
}
 
#container
{
width:1200px;
height:1200px;
left:50%;
margin-left:-600px;
/*margin:0 auto;*/
border:0px ridge #0D71A4;
border-radius:30px;
box-shadow: 2px 3px 40px #524633;
background: linear-gradient(90deg,#b5e655 0%, #ffffff 6%, #ffffff 50%, #ffffff 94%, #b5e655 100%);
position:relative;
z-index:1;
}

Vous remerciant par avance,
Astumap

Invité · 18/09/2019, 11h18

Bonjour,

1- il faut montrer le code HTML associé.

et encore : ça ne suffira pas à visualiser le problème.
Une page en ligne serait bienvenue.

2- HTML5 : le guide du débutant

**Astumap** · 18/09/2019, 14h26

Malheureusement je ne peux pas mettre en ligne la page.

Néanmoins voici le code de la page index (j'ai simplement supprimé quelques liens et noms confidentiels) :

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
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
         <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=11" />
        <link rel="stylesheet" media="all" type="text/css" href="styledev.css" />
    <title>Portail Dev</title>
</head>
 
<body>
         <div id="header">
                <div id="logo"></div>
                <div id="date">
                <script language="javascript" src="datedev.js"></script>
                </div>
                <div id="horloge">
                <script language="javascript" src="horlogedev.js"></script>
                </div>
 
                <div id="barreicones">
<script language="javascript" src="glpi.js"></script>
<a href="L:\" target="Données"><img src="icones/logo_donnees.png" width=33 height=33 title="Données"></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://partenaires.caf.fr/portal/auth/login" target="CAF.FR"><img src="icones/logo_caf.PNG" width=33 height=33 title="CAF.FR"></a>
<a href="https://www.service-public.fr" target="Service Public"><img src="icones/logo_sp.jpg" width=32 height=32 title="Service Public"></a>
<a href="https://www.pagesjaunes.fr" target="Pages Jaunes"><img src="icones/logo_pj.jpg" width=32 height=32 title="Pages Jaunes"></a>
<a href="https://www.google.fr" target="Google FR"><img src="icones/logo_google.png" width=33 height=33 title="Google France"></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://val-imp02/watchdoc/jobs.asp" target="Imprimantes"><img src="icones/logo_km.PNG" width=32 height=32 title="Imprimantes"></a>
</div>
 
        </div>
 
<div id="container">
 
        <div id="menu">
        <div id="onglets">
    <li class="active"><a href="index.html">Accueil</a></li>
    <li><a href="gdm.html">Gestion Dossier</a></li>
    <li><a href="sctf.html">Conseil</a></li>
    <li><a href="ods.html">Organisation de Service</a></li>
    <li><a href="qualite.html">Amélioration Continue</a></li>
        <li><a href="historique.html">Historique</a></li>
    </div>
        </div>
 
<div id="main">
 
<div id="column_left">
<div id="column_title">
Dernières Modifications
</div>
 
<br>
<div id="datenews">22.07.2019 - Nouveautés</div>
<br>
                                                        <i><b>OUVERTURE et EXERCICE</b></i><br>
                                                <li> Mise à jour du tableau <br>
                                                <li> Mise à jour du tableau </a></li> <br>
<br>
                                                        <i><b>OUVERTURE</b></i><br>
                                                <li> Mise à jour </li><br>                                             
<br>
 
</div>
 
<div id="column_right">
<div id="column_title"> 
Vie du Service
</div>
<br>
<div id="datenews">12.09.2019 - Chrome</div>
<br>
<li>Le navigateur Chrome vient d’être installé</li>
</div>
 
<div id="column_right">
<br>
<div id="datenews">11.09.2019 - Test</div>
<br>
<li>test</li>
<br>
</div>
 
<!-- this layer solve some issue about the css design, forced the #main layer height equal to height of two column layer (#columnt_left and #column_right) inside itself -->
<div class="spacer"></div>
<!-- close #main content -->
</div>
<!-- close #container -->
</div>
 
<div id="footer">
<script language="javascript" src="footer.js"></script>
</div>
</body>
</html>

En attendant je vais également consulter le guide, merci

Invité · 18/09/2019, 15h39

Code :

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

1
2
3
<link rel="stylesheet" media="all" type="text/css" href="styledev.css" />
...
<script language="javascript" src="datedev.js"></script>

1- Les URLs des scripts Js et fichiers CSS sont relatifs.
On ne peut pas tester.

2- Tu peux supprimer language="javascript" partout.

3- TESTE la page, en supprimant UN à UN les scripts JS, jusqu'à ce que le problème disparaisse.
Tu sauras alors quel script cause le problème.

**Astumap** · 18/09/2019, 16h21

Merci pour ton aide !
J'étais tellement focalisé sur le header que je ne pensais pas à ce qu'il y avait à l'intérieur...
En CSS, tous mes div id compris dans le header (logo, date, etc...) étaient en position:fixed, je les ai mis en relative et là tout est rentré dans l'ordre

Header fixe qui saute pendant le scroll

Défilement en CSS

Discussions similaires

Partager

Partager