使用Intersection Observer控制元素显隐及现有JS代码错误排查

• CSS语法错误：.nava 样式规则中 display:none 后缺失分号，导致后续height等属性无法被浏览器正常解析，样式完全失效
• jQuery选择器不规范：代码中直接写$(nava)属于非标准写法，依赖部分浏览器自动将带id的DOM元素挂载为window全局变量的特性，兼容性极差，标准写法应为$('#nava')
• 冗余代码：仅监听了单个#wrapt元素，IntersectionObserver回调中无需遍历entries数组，可直接取第一个元素判断，简化代码

HTML #

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

CSS #

.nava{
  display:none;
  height:25px;
  background:orange;
  position:relative;
  z-index:9;
}
.wrapt{
  height:54px;
  background:lightblue;
}
.story{
  height:200vh;
  background:#ddd;
}

JS #

let io = new IntersectionObserver((entries) => {
  const entry = entries[0]
  if(entry.isIntersecting){
    // wrapt可见，隐藏nava
    $('#nava').slideUp()
  } else {
    // wrapt不可见，显示nava
    $('#nava').slideDown()
  }
})

$(document).ready(function(){
  io.observe(document.querySelector('#wrapt'))
})

内容的提问来源于stack exchange，提问作者qadenza