Menu apparent ou non en fonction du scroll

Bonjour,

Je suis en train de créer un site internet mais je suis loin d'être un crack du html5 css !!! Malgrè mon incompétence, je tiens a créer un site propre, agréable et... responsive.

Je me suis donc basé sur le tuto grafikart :
https://www.grafikart.fr/tutoriels/html-css/menu-hamburger-responsive-512
pour créer un menu responsive ce qui fonctionne parfaitement bien.

Voici la maquette du site : http://diy-glidecam.comlu.com et lorsque l'on diminue la fenêtre de navigation, le menu se transforme en un petit hamburger cliquable.

Cependant, je souhaiterai modifier un élément lorsque les visiteurs sont sur mobile a savoir que l'entête avec le hambuger et le logo disparaisse lorsque l'on scroll vers le bas et réapparaisse lorque l'on scroll vers le haut (comme la barre d'adresse sur le navigateur chrome sur mobile)

Pouvez-vous me guider s'il vous plaît.
Modifié par Freemuse (30 May 2016 - 11:44)

Bonjour Freemuse,

Ce que tu demande là est strictement impossible uniquement en Css. Ce langage ne peut détecter le scroll.

Par contre il est tout à fait possible de le réaliser en JavaScript. Pour ce faire, je te propose d'aller voir ScrollReveal sur GitHub.

Bonne intégration !

Peut-être veut garder le contenu dans le flux et laisser html montrer la scrollbar ?

example sur les medias queries en 1100px:

@media only screen and (max-width: 1100px){
	.site-container{
/* enlever */
	}

	.site-content{
	/*enlever*/
		margin-top: 50px;
		/* decalage pour laisser le contenu dessous */

		}