mostrar e esconder div

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>