Comment masquer une div qui en rencontre une autre

Fermé
flexi2202 Messages postés 3783 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 20 février 2023 - 16 janv. 2022 à 22:09
bonsoir a tous
n'ayant rien trouvé depuis 2 jours
je reviens vers vous avec mon problème pour cacher une div qui en rencontre une sans utiliser jquery

j'ai trouvé le code comment cacher une div qui arrive a une certaine hauteur avec ce code
lorsque l'axe arrive a y =1500px ma div disparaît
Mais le problème si j'utilise ce code sur un smartphone
la valeur 1500px n'est plus valable

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


j'ai tenté ceci aussi , mais cela ne cache plus ma div

<script>
          function showDiv()
          {
            if ($(window).scrollTop() < $(".testmasque").offset().top)
            {
              $('.header-navbar').fadeIn('slow');
            }
            else
            {
              $('.header-navbar').fadeOut('slow');
            }
          }
          $(window).scroll(showDiv);
          showDiv();
        </script>


ensuite j'ai trouvé un autre code qui fonctionne nickel mais uniquement sur la hauteur de l'écran
voici une capture d'écran du phénomène
lorsque la barre verte rencontre la rouge
le rouge disparaît sauf que dans mon cas j'ai besoin que la barre verte soit plus bas que le bas de l'écran
car le contenu du conteneur 1 est plus haut que la page
pourtant la propriété du conteneur 1 est bien de 100 %
donc théoriquement la barre verte devrait être repoussée plus bas que le fond de l'écran



<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment masquer une div qui rencontre une autre div ?</title>
<style>
.fixe
{
position: fixed;
}
.afficher
{
opacity: 1;
visibility: visible;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
.cacher
{
opacity: 0;
visibility: hidden;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
#header{
background-color: red;
width: 100%;
height: 20px;
}
#conteneur_01{
height:100%;
padding-top: 20px;
}
#essai{
background-color: green;
}
#conteneur_02{
height:100%;
}
</style>
</head>
<body>
<div id="header" class="fixe afficher">header</div>
<div id="conteneur_01">conteneur 1</div>
<div id="essai">Essai</div>
<div id="conteneur_02">conteneur 2</div>
<script>
window.onscroll = function(){cacherHeader()};
var header = document.getElementById("header");
var essai = document.getElementById("essai");
var position_essai = essai.offsetTop;
function cacherHeader()
{
  if (window.pageYOffset <= position_essai) 
  {
    if (header.classList.contains("afficher") == false)
    {
        header.classList.remove("cacher");
        header.classList.add("afficher");
    }
  } 
  else 
  {
    if (header.classList.contains("afficher") == true)
    {
        header.classList.remove("afficher");
        header.classList.add("cacher");
    }
  }
}
</script>
</body>
</html>


ah oui détail important aucune erreur dans la console