necesita mostrar nava si wrapt no está visible al desplazarse por la página
y viceversa: ocultar el nava si wrapt está visible
¿Qué está mal con este código JS?
let io = new IntersectionObserver((entries) => { entries.forEach(entry => { if(entry.isIntersecting){modify(entry.target);} else{revert(entry.target);} }); }); function modify(el){ if(el.id == "wrapt"){$(nava).slideUp();} } function revert(el){ if(el.id == "wrapt"){$(nava).slideDown();} } $(document).ready(function(){ io.observe(document.querySelector('#wrapt')); }); .nava{ display:none height:25px; background:orange; position:relative; z-index:9; } .wrapt{ height:54px; background:lightblue; } .story{ height:200vh; background:#ddd; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='nava' id='nava'></div> <div class='wrapt' id='wrapt'></div> <div class='story'></div>No hay nada malo con la parte JS, solo el CSS. Modifiqué la clase nava para que sea visible cuando la página se desplace hacia abajo:
.nava { display: none; height:25px; background: orange; position: fixed; width: 100%; z-index: 9; top: 0; left: 0; } let io = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { modify(entry.target); } else { revert(entry.target); } }); }); function modify(el) { if (el.id == "wrapt") { $(nava).slideUp(); } } function revert(el) { if (el.id == "wrapt") { $(nava).slideDown(); } } $(document).ready(function() { io.observe(document.querySelector('#wrapt')); }); .nava { display: none; height:25px; background: orange; position: fixed; width: 100%; z-index: 9; top: 0; left: 0; } .wrapt { height: 54px; background: lightblue; } .story { height: 200vh; background: #ddd; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='nava' id='nava'></div> <div class='wrapt' id='wrapt'></div> <div class='story'></div>