[Résolu] Fixer un menu réduit après scroll

Bonjour, je cherche à réaliser une espèce de sticky header (js, jQuery, ou autre) dans l'esprit de celui d'allocine.fr : à l'ouverture de la page, le header est développé (gros logo et champ de recherche notamment), puis en scrollant, à la disparition de ce header, on le remplace (par une petite animation de slide-down par exemple) par un header minimizé, en remplaçant le champ de recherche par une loupe par exemple.
Allociné représente parfaitement ce que je recherche...
Bien entendu j'ai passé des heures et des heures à chercher avant de venir demander de l'aide ici, mais je ne trouve que des sticky headers qui réduisent le header de base... pas mon truc
Je vous remercie par avance pour votre aide, et reste dispo pour vos questions...

Bonjour,

Peut-être que c'est réalisable en jQuery et CSS.

Quel est votre code?

Je n'ai pas encore codé... l'idée est juste de faire apparaître/disparaître un DIV contenant mon menu "minimizé" lorsqu'on atteint le bottom du DIV du menu "normal"...
Donc en gros :

<div id="header">
<img src="logo_normal.png">
<form>
<input type="texte" name="recherce" placeholder="Recherche">
<!-- etc etc code formulaire -->
</form>
<a href="account.php">Mon compte</a>
<!-- etc etc liens navigation -->
</div>

<div id="minimized">
<img src="logo_reduit.png">
<a href="search.php">Recherche</a>
<a href="account.php">Mon compte</a>
<!-- etc etc liens navigation -->
</div>

Salut,

Il suffit d'avoir un petit bout de code Js (pas besoin de se traîner tout JQuery juste pour ça) qui va détecter si le scroll est à plus de X pixel du top. Une fois cette limite dépassé il vous suffit de rajouter une classe CSS sur le menu :
- soit sur le même menu : en overidant le code afin de le coller en haut (mais cela peut causer un "saut" de la page vu qu'il sortira du contenu)
- soit sur un second menu déja positionné comme il faut en sticky mais invisible. La classe ajouter se chargera donc de le faire apparaître avec une animation etc.

Je suis tout à fait d'accord avec toi, option 2
En revanche, je ne sais pas coder ça... d'où ma présence ici

Plop un petit exemple tout simple : https://jsfiddle.net/Undless/5x5qjnh6/3/

Tiré du dernier exemple de W3Schoools.com sur le onscroll Event http://www.w3schools.com/jsref/event_onscroll.asp
Modifié par _laurent (03 Jan 2017 - 16:08)

Ça semble être précisément ça !
Merci bcp. Je vais bricoler maintenant...

Et donc... résolu.

J'ai juste une ou deux questions sur la méthode utilisée, à des fins d'apprentissage.

Le site sera-t-il parfaitement accessible aux mal-voyants? Le fait d'avoir le même menu 2 fois sera lu 2 fois, non? A moins de mettre un "display:none" au second pour qu'il soit soit ignoré? Et si le menu contient des images, est-ce qu'il y aura une ou deux requêtes http dans ce cas (si le menu est en display: none) ?

J'ai trouvé un plugin jQuery qui se rapproche du menu du site Allociné

http://www.menucool.com/ui/animated-sticky-header-on-scroll#

Non je ne mets pas 2 fois le même menu, je remplace certaines options quand on scroll, qui n'ont plus lieu de prendre autant de place, comme le logo et un champ de recherche... vraiment à l'instar d'Allocine.

Quant au script jQuery en question, je l'avais vu et même adapté, mais il ne propose rien d'autre que de réduire la hauteur en fait... donc le petit javascript proposé plus haut me convient à merveille (je l'ai adapté, c'est bon, j'ai juste un problème de plan, car mon carousel passe par-dessus le sticky malgré tous mes efforts de z-index et autres...)

Bizarre, c'est sûrement un problème de z-index, qu'il faut bien placer sur les conteneurs parents je pense.