Comment Faire apparaître disparaître une div lors du scroll

bonsoir a tous

j essaye de masquer une div lorsqu elle apparaitra sera a une certaine distance du bord supérieur
mais cela ne fonctionne pas avec ce code trouvé

Merci de l aide

                  
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 300) {
    $('.header').fadeIn();
  } else {
    $('.header').fadeOut();
  }
});

je suis parvenu a trouver un code qui fonctionne

mais est il possible de remplacer 1500 par le non d une div de tel façon que lorsqu' il arrive a la hauteur de la div blabla que la div header se ferme

function showDiv() {
    if ($(window).scrollTop() < 1500) {
        $('.header-navbar').fadeIn('slow');
    } else {
        $('.header-navbar').fadeOut('slow');
    }//);
}
$(window).scroll(showDiv);
showDiv();

Modifié par flexi2202 (15 Jan 2022 - 20:29)

Bonjour,

1) Tout est possible en la matière.

2) On ne comprend rien à ta question.

3) Il faut faire un exemple html avec des indications de hauteur des éléments si possible pour qu'on puisse se faire une idée, et indiquer ce qui doit disparaitre et quand. Parce que tel que tu poses la question, on peut agir sur tout et rien. La réponse serait du hasard.

Amicalement,
Modifié par parsimonhi (15 Jan 2022 - 20:57)

Bonsoir
Merci pour la réponse
Faire un exemple en HTML c'est compliqué...
Je vais donc essayé de mieux m'expliquer

Je suis occupé à réaliser un bon de commande avec beaucoup d'articles
Afin que les utilisateurs puissent voir les articles ajoutés j'ai donc un panier qui est situé dans dans une div fixed en haut de l écran
Avec le code que je viens de montrer cette div disparaît (le panier) lorsque on arrive à 1500px

Cela fonctionne nickel

L endroit de 1500px est situé ou ce trouve le détail de la commande,et donc à cet endroit l utilisateur n 'a plus besoin d'avoir ce panier fixed puisqu'il y tout le détail de la commande

Le problème c est lorsque je suis en responsive les docs se mettent les unes sous les autres etdu coup le panier fixed suitée l écran trop vite

Bonjour,

Bon, déjà, le fait que la div à faire disparaitre soit en position:fixed, ça change pas mal de chose. On aurait vite fait de te proposer n'importe quoi sans cette information !

Donc, en gros, il faut qu'on fasse disparaitre une boite "A" en position:fixed, lorsqu'une autre boite "B" plus bas dans la page devient visible. Et on a le droit au js (et même jquery en plus) pour ça. C'est trop facile, je me demande si ça vaut le coup que je donne la solution !

Plus sérieusement, on a besoin :
- de la hauteur visible de la fenêtre (en pixels) : $(window).height()
- la quantité de pixels dont le contenu a été scrollé : $(window).scrollTop()
- de la position du bord haut de la boite "B" par rapport au contenu : $('#B').offset().top
- de la hauteur de la boite "B" : $('#B').height()

Et ensuite il suffit de faire quelques calculs pour déterminer à quel moment on fait disparaitre la boite "A".

Exemple : http://jsfiddle.net/parsimonhi/9e1jsn0k/

Dans cet exemple, la boite "A" (en rouge) disparait lorsque la boite "B" (en vert) devient complètement visible. La boite "B" étant en fin de page, on ne la voit pas au départ, il faut scroller pour la voir apparaitre.

Amicalement,

bonjour

Merci pour la réponse et les explications cela est vraiment du haut niveau
un énorme super merci

vraiment génial 100%

Je viens de remarquer un petit soucis lorsque j utilise cette librairie

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Mes images ne sont plus agrandie lorsque je clique dessus avec ces librairies

    <!-- Magnific Popup core CSS file -->
      <link rel="stylesheet" href="https://phil.pecheperle.be/css/magnific-popup.css">
      <!-- jQuery 1.7.2+ or Zepto.js 1.0+ 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Bonjour,

Le problème peut venir de n'importe où y compris d'ailleurs que de ce que tu nous montres.

Amicalement,

bonjour
merci pour la réponse
tout compte fait je me suis inspire de la première solution qui fonctionne a 1000 % aux premiers essais
Mais je me pose une question est il possible que la boite rouge puisse disparaître moins vite a lorsque la boite verte la rejoins

Ou comment est effectuer le calcul

apparemment cela se passe ici

return (EOT < (WH + WS - EH ));

Amicalement
Modifié par flexi2202 (17 Jan 2022 - 08:59)

Bonjour,

Je ne suis pas sûr d'avoir compris ce que signifie "moins vite" pour toi.

flexi2202 a écrit :
apparemment cela se passe ici

return (EOT < (WH + WS - EH ));

Oui, cela peut se passer "ici" s'il s'agit d'attendre que la boite verte soit remontée "assez" dans la page. Tu peux par exemple modifier la formule en "retirant" des pixels après EH. Par exemple, avec la formule ci-dessous, la boite rouge ne disparaitra que si la boite verte est à au moins 100px du bas de l'écran.

return (EOT < (WH + WS - EH - 100));

Tu pourrais aussi en "ajouter" pour faire disparaitre la boite rouge plus rapidement.

return (EOT < (WH + WS - EH  + 100));

Mais ton "moins vite" peut aussi vouloir dire "après un certain temps" (ce qui peut se faire avec la fonction js setTimeout()), ou "progressivement" (ce qui peut se faire avec un .fadeOut() sur la boite rouge en jquery, comme tu sais déjà le faire puisque je l'ai vu dans un de tes codes précédents).

Amicalement,