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

Question

如果通过滚动页面无法看到nava，则需要显示wrapt

反之亦然-如果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 {
  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>

​