如何使用交叉點觀察器顯示/隱藏元素

Question

如果通過滾動頁面看不到wrapt ，則需要顯示nava
反之亦然 - 如果nava可見，則隱藏wrapt
這個 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>

Answer 1

JS 部分沒有問題，只有 CSS。 我已經修改了 Nava nava所以當頁面向下滾動時它會可見：

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