Utilisation du scroll

Bonjour

J'ai une div appelée Top que je souhaite voir disparaitre quand je scroll et que la position arrive à 200... Pas de problème avec le code :

Code:

---

1 2 3 4 5 6 7

$(window).bind('scroll', function(e) { var val = $(this).scrollTop(); $('#scroll-top-mobile').html('scroll top: ' + val + 'px').show(); if (val > 200 ) { $('#top').hide(); $('#top2').show(); } });

---

Et je remplace Top par Top2.

Mais le problème est que j'aimerais que Top réaparraisse si je scrolle vers le bas quand Top2 est affichée mais étant donné que Top2 est en haut et que ma page n'est plus assez grande, pas de scrool possible...

Je pense que je ne m'y prends pas comme il faut.

La finalité étant de faire comme la page www.pagesjaunes.fr par exemple.

Peut etre devrais-je, au lieu de la faire disparaitre, la faire monter encore plus haut afin qu elle quitte l'écran et afficher Top2 en position fixe en haut de l'écran... mais ça je ne sais pas faire, je découvre jQuery aussi.

Merci de vos conseils.

Bon, je suis parvenu à faire cela :

Citation:

---

Peut-être devrais-je, au lieu de la faire disparaître, la faire monter encore plus haut afin qu elle quitte l'écran et afficher Top2 en position fixe en haut de l'écran.

---

Le problème maintenant est que cela ne fonctionne qu'avec les ascenseurs, Top s affiche à nouveau. Par contre, si je scroll avec la roulette de la souris, je ne passe jamais le palier de 200 et suis figé sur Top2.

La méthode n'est peut-être pas la bonne.

Merci de votre aide.

EDIT : En plus je viens de m apercevoir que si j ai l'écran réduit type mobile, les tailles ne sont plus les mêmes donc je suis vraiment coincé là...

J ai trouvé la solution ici : http://jsfiddle.net/uaqh018d/30/