Header qui se fixe en haut de la page après un scroll

Question

pierre_bs

29 Apr 2014 à 23:43

Bonjour,
Je suis un peu novice en CSS et je cherche à faire un header ( qui contient un menu ) qui se fixe en haut de la page après avoir scroller.
Car le header n'est pas en haut de la page à son ouverture (c'est ce que j'ai voulu )

Je veux faire comme ça: http://jsfiddle.net/AUsnL/45/

Seulement je n'arrive pas à l'adapter à mon code.
Quelqu'un pourrait m'aider ?
Merci. Smiley smile


<!DOCTYPE HTML>
<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Non de la page</title>

<style type="text/css">
body {
	background-image: url(Images/motif%20de%20fond.png);
	background-repeat: repeat;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 100px;
	background-attachment:fixed;
	
}
wrapper {
	background-color: #F6F6F6;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	height: 100%;
	margin-top: 100%;
}
#dataflow {
	margin-right: auto;
	margin-left: auto;
	width: 80%;
	margin-top: 250px;
	height: 387px;

}
#dataflow img {
	width: 75%;
	position:fixed;
	z-index:1;
	margin:auto;
    
	}
#wrapper #cotent {
	background-color: #999;
	height: 900px;
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	position:relative;
    z-index:2;
	
}
#wrapper #header {
	background-color: #CCC;
	height: 50px;
	width: 100%;
	margin-top: 10%;
	position:relative;
    z-index:3;
}

#wrapper #footer {
	font-size:5px;
	margin:auto;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	text-decoration: none;	
}

       #nav {
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}  

#nav li {  
    display: inline;  
    list-style: none; 
	 
}  
#nav a {  
    display:inline-block;  
    margin: 20px 180px; 
	text-decoration: none;
	color: #000; 
}

#nav a:hover {
	display:inline-block;
	text-decoration: none;
	border: 2px solid #000;
	padding: 6px;
	margin: auto 171.99px; 
}

</style>



</head>

<body id="top">

<wrapper id= "wrapper">

<div id= "dataflow">
<img src="Images/logo dataflow.png" >
</div>


    <header id = "header">
  
     <ul id="nav"><!-- 
        --><li><a href="#">Designer</a></li><!-- 
        --><li><a href="#">Index</a></li><!-- 
        --><li><a href="#">Contact</a></li>  
    </ul>  
   
    
</header>

        <section id ="cotent">
        <div></div>
        </section>
        
  <footer id = "footer">
  <h1> blabla © All rights reserved
  </h1>
  </footer>
         
</wrapper>

</body>

</html>

Modifié par pierre_bs (29 Apr 2014 - 23:48)

audrasjb

30 Apr 2014 à 00:34

Bonjour et bienvenue sur le forum, pierre_bs Smiley smile

Il te faudra alors utiliser Javascript pour ajouter une classe à ton élément header lorsque le scroll est égal ou supérieur à une certaine valeur en pixels. Cette classe correspondra à des déclarations de type position : fixed, etc. en CSS.

Si tu utilise la librairie jQuery, tu peux par exemple faire ceci :


 $(function(){
   $(window).scroll(function () {//Au scroll dans la fenetre on déclenche la fonction
      if ($(this).scrollTop() > 160) { //si on a défilé de plus de 160px du haut vers le bas
          $('header').addClass("fixe"); //on ajoute la classe "fixe" au header
      } else {
      $('header').removeClass("fixe");//sinon on retire la classe "fixe" (c'est pour laisser le header à son endroit de départ lors de la remontée
      }
   });
 });

Attention, le code ci-dessus est fait à la va-vite pour t'expliquer grosso-modo le principe. À toi de l'adapter suivant ton cas. Dans tous les cas, tu devrais te renseigner sur la fonction jQuery scrollTop qui t'intéresse ici particulièrement.

Bonne continuation ! Si tu as un souci, n'hésite pas à isoler ton problème sur un petit jsFiddle ou autre service, c'est bien plus simple d'aider ainsi Smiley smile

pierre_bs

30 Apr 2014 à 01:24

Merci pour ton aide,
J'ai bien compris la logique du code javascript mais je crois que c'est l'apocalypse dans mon html c'est pour ça que je ne m'en sort pas. Smiley decu

http://jsfiddle.net/tDke2/

Zelalsan

30 Apr 2014 à 04:49

salut,
je connais ce code Smiley rolleyes

...En fait tu pourrais faire plus simple en JS.


var header = document.getElementById("header");

function scrolled(){
	header.className = (window.pageYOffset >= document.documentElement.clientHeight - header.offsetHeight) ? "fixed" : "";
}

addEventListener("scroll", scrolled, false);

et ajouter un CSS


#header.fixed {position:fixed;width:100%;top:0;left:0;margin-top:0;}

Mais il te faut savoir qu'en effet ton code est assez chaotique. Je ne connais pas la balise <wrapper> et le CSS est assez confus.
Enfin bref, je pense tout de même le code marchera en notant qu'il ne sera pas pris en compte par ie8 et moins qui utilise "attachEvent" au lieu de "addEventListener".

EDIT: erreur de copier/coller.
Modifié par Zelalsan (30 Apr 2014 - 04:50)

Olivier C

30 Apr 2014 à 10:59