[Résolu] Fermer un div au scroll

Bonjour,

Je viens vers vous car ça fait un bout de temps que je cherche et pour l'instant la solution ne me vient pas.
Je souhaiterais fermer un div au scroll - sachant que ce div est en position fixed.

A titre d'exemple, sur tous les mobiles (je pense) il y a une barre statut que l'on ouvre en scrollant au doigt et on le referme de la manière. C'est cet effet-là que je recherche (pour la fermeture).

J'ai tenté quelque chose en js, mais si je lance le scroll c'est le contenu en dessous qui va scroller, se charger puis seulement après mon div se ferme. Ce qui me pose problème.

Si vous avez une idée, une suggestion qui pourrait m'éclairer.. j'ai l'impression de m'être enfoncé dans le mauvais chemin

Merci

au toucher éventuellement , tu peut changer une class et avec une transition ouvrir/fermer un div de façon fluide.

Voici un test de base rapide avec pointer-events en CSS pour voir si c'est ce que tu souhaite.
Si oui, a gerer en javascript ou jquery pour ajouter/enlever une class au lieu du pointer-events. http://codepen.io/gcyrillus/pen/vGNvmo

P.S. remarque l'option CSS resize en commentaire, peut-être tester au lieu du pointer-events .
Modifié par gcyrillus (05 Mar 2016 - 19:51)

J_B a écrit :
A titre d'exemple, sur tous les mobiles (je pense) il y a une barre statut que l'on ouvre en scrollant au doigt et on le referme de la manière. C'est cet effet-là que je recherche (pour la fermeture).

Oui je vois : vous voulez reproduire la barre que l'on peut trouver sur des systèmes tels qu'Androïd.

Je viens de m'amuser à reproduire le comportement via une solution en jQuery, c'est ici : Resize Navigation Bar.

Le code jQuery :

var nav = $('.resizer');
var navCmd = nav.find('button');
var navContent = nav.find('ul');
navContent.hide();
navCmd.on('click touchstart', function() {
  if (navContent.is(':visible')) {
    navContent.slideUp();
  }
  if (!navContent.is(':visible')) {
    navContent.slideDown();
  }
  return false;
});

Bonjour et merci à vous deux pour vos réponses constructives.

J'ai testé vos deux exemples sur mon mobile, le premier fonctionne au clic, je cherchais surtout quelque chose que l'on peut glisser. ça reste effectivement un bon début.

Le deuxième en revanche, correspond en tout point à ce que je recherchais. Comme je n'aime pas le jquery je vais m'inspirer de ton code pour faire ça nativement en js.

Merci beaucoup vous m'avez bien aidé
Si j'ai d'autres questions sur le sujet je reviendrais vers vous, en attendant je passe le sujet en résolu.

as tu tester ces deux la : sur resize:vertical ?

http://codepen.io/gcyrillus/pen/wGKOmL et http://codepen.io/gcyrillus/pen/WwQmgb (malmené pour obtenir une zone reactive sur une plus grande largeur) ...

Mais oui, javascript est la solution la plus sure.