mostrar e esconder div

[Biel. 9]

Olá pessoal. Ao rolar o scroll a div azul some. Como fazer a div verde aparecer quando a div azul sair de cena?

<style>
*{margin: 0; padding: 0;}

#azul{
	max-width: 500px; 
	margin: auto;
   height: 100px;
   background-color: blue;
}

#verde{
	max-width: 500px;  
	margin: auto;
	background-color:green;
   display: block;

   position: fixed;
	top: 0;
	position: sticky;
	position: -webkit-sticky;

}

.espaco{
   height: 50px; 
   margin: 500px 0px;
   border: 1px solid orange;
}

</style>

...

<div id="azul" > Azul </div>
<div id="verde"> verde </div>
<p id="p2">teste</p>
<div class="espaco"></div>

...

<script>
window.onscroll = function() {
   arrastar()
};

// document.getElementById("verde").style.display="none";	
function arrastar(){
   var ggScroll = 100;

   //   if(ggScroll==100)
		//  var x = document.getElementById("verde").style.display="block";
   
       let tete = document.body.scrollTop;
      document.getElementById("p2").innerHTML = tete;	

}

</script>

 

[Omar~ 87]

Tem jeito melhor e mais eficaz de fazer isso acontecer, mas dessa forma fica mais simples de se entender.

<style>
    * {margin: 0; padding: 0}

    #azul {
        max-width: 31.25rem; 
        margin: auto;
        height: 6.25rem;
        background-color: blue
    }
    #azul.acao {visibility: hidden}

    #verde {
        max-width: 31.25rem;  
        margin: auto;
        background-color:green;
        top: 0;
        position: sticky;
        visibility: hidden
    }
    #verde.acao {visibility: visible}

    .espaco {height: 312.5rem}
</style>

<div id="azul"> Azul </div>
<div id="verde"> verde </div>
<p id="p2">teste</p>
<div class="espaco"></div>

<script>
    var azul = document.getElementById('azul'),
        verde = document.getElementById('verde');

    document.addEventListener('scroll', function (evento) {
        if (window.scrollY >= azul.offsetHeight) { // Quando a rolagem for maior ou igual a altura do azul
            azul.classList.add('acao');
            verde.classList.add('acao');
        } else {
            azul.classList.remove('acao');
            verde.classList.remove('acao');
        }
    }, false);
</script>

 

[Biel. 9]

3 horas atrás, Omar~ disse:

Tem jeito melhor e mais eficaz de fazer isso acontecer, mas dessa forma fica mais simples de se entender.

<style>
    * {margin: 0; padding: 0}

    #azul {
        max-width: 31.25rem; 
        margin: auto;
        height: 6.25rem;
        background-color: blue
    }
    #azul.acao {visibility: hidden}

    #verde {
        max-width: 31.25rem;  
        margin: auto;
        background-color:green;
        top: 0;
        position: sticky;
        visibility: hidden
    }
    #verde.acao {visibility: visible}

    .espaco {height: 312.5rem}
</style>

<div id="azul"> Azul </div>
<div id="verde"> verde </div>
<p id="p2">teste</p>
<div class="espaco"></div>

<script>
    var azul = document.getElementById('azul'),
        verde = document.getElementById('verde');

    document.addEventListener('scroll', function (evento) {
        if (window.scrollY >= azul.offsetHeight) { // Quando a rolagem for maior ou igual a altura do azul
            azul.classList.add('acao');
            verde.classList.add('acao');
        } else {
            azul.classList.remove('acao');
            verde.classList.remove('acao');
        }
    }, false);
</script>

 

De primeira Omar. Funcionou bem. Obrigado!