Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni?

[fede12]

Ciao a tutti gli interessati. Sto provando a far scomparire un div fixed o renderlo relativo una volta che raggiunge un altro div. Purtroppo tutti i codici che sto provando non funzionano. Il sito è costruito su WordPress tema Avada.

Ecco l'ultimo codice che sto provando in questo momento ma che non funziona in alcun modo:

JAVA

$(document).ready(function() {
var $window = $(window);
var div2 = $('#div2');
var div1 = $('#div1');
var div1_top = div1.offset().top;
var div1_height = div1.height();
var div1_bottom = div1_top + div1_height;
console.log(div1_bottom);
$window.on('scroll', function() {
var scrollTop = document.documentElement.scrollTop;
var viewport_height = $window.height();
var scrollTop_bottom = scrollTop + viewport_height;
div2.toggleClass('show', scrollTop > div1_top && (scrollTop + window.innerHeight) < div1_bottom);
});
});

CSS

#div1 {
position: relative;
height: 5px
}


#div2 {
position: fixed;
bottom:0;
z-index: 99999999;
display: none;
}

#div2.show {
display: block;
z-index: 99999999;
}

#div3 {
position: relative;
height: 5px
}

HTML

<div id="div1">
<div id="div2">This is <b>div2</b></div>
This is <b>div1</b>
<br>
<i>(Toggle show/hide <b>div2</b> when scrolling past the top of this element)</i>
</div>
<div id="div3">
This is <b>div3</b>
<br>
<i>(Toggle show/hide <b>div2</b> every time this div becomes visible in the window)</i>
</div>

Ho provato anche a sostituire java in questo modo:

jQuery(document).ready(function($){
...

Purtroppo nulla non riesco a farlo funzionare. Cosa cavolo sto sbagliando? Ogni parere è prezioso. Grazie in anticipo!