如何使用交叉点观察器显示/隐藏元素

Question

need to show nava if wrapt is not visible by scrolling the page
and vice versa - hide the nava if wrapt is visible
what is wrong with this JS code?

 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>

Answer 1

Nothing wrong with the JS part, only the CSS. I've modified the nava class so it will be visible when the page is scrolled down:

.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>