原生JS 实现吸顶效果的三种方式

〇、三种方法的优劣

intersectionObserver本以为是最优解，实现时发现效果并不好。
因为这个API的优先级比较低，每次都要等待页面渲染完成之后才能再次响应，所以在快速滑动的时候会出现抖动。

1. 流畅度：CSS >= scroll > intersectionObserver
2. 性能：CSS>= intersectionObserver >= scroll
3. 兼容性：scroll > intersectionObserver > CSS

一、通过监听全局scroll实现

let reference = document.querySelector(".reference")
let nav = document.querySelector(".nav")
document.addEventListener("scroll",(e)=>{
   
  const distance = reference.getBoundingClientRect().top
  console.log(distance);
  if (distance<=0){
   
    nav.classList.add('fix')
  }else {
   
    nav.classList.remove('fix')
  }
})

<div class="box"></div>
<div class="reference"