Comment masquer une div qui rencontre une autre div ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-01-16 18:18:11

Question

Bonjour a tous, Je souhaiterais que la div header fixed puisse être masquée lorsqu' elle arrive au niveau de la div essai, mon code ci dessous ne masque pas la div test.

En pur javascript svp.

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

Réponse

Bonjour, vous pouvez utiliser les propriétés JavaScript offsetTop et pageYOffset pour détecter la position du scroll et des éléments du DOM ; puis ensuite masquer une div qui rencontre une autre div, via un peu de CSS, en ajoutant ou supprimant une CLASS qui inclue la propriété CSS visibility.

Pour remplacer les fonctions jQuery fadeIn() et fadeOut(), vous pouvez utiliser les propriétés CSS transition et opacity.

<!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:200px;
padding-top: 20px;
}
#essai{
background-color: green;
}
#conteneur_02{
height:1500px;
}
</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>