背景
在开发Web应用程序时，如果想知道一个元素是否可见，传统的方式是监听scroll事件，然后调用元素的getBoundingClientRect()方法，获得元素相对于视窗的位置来判断。这种方式的劣势在于，scroll事件触发非常频繁，常常容易造成页面卡顿。但Intersection Observer API出来以后，可以正式对这种方式说拜拜了。
基本概念
IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。
上面引用的是MDN上定义的概念，简单来说就是：观察一个元素在其祖先元素内是否可见。详见下图：
如何使用
<div class="footer">footer</div>
const intersectionObserver = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
// todo
// ...
}
});
// 观察元素
intersectionObserver.observe(document.querySelector('.footer'));
构造器接受参数说明，官方文档讲的比我好。我就不画蛇添足了，我主要对rootMargin参数做个补充，rootMargin的值是一个字符串, 形式与CSS margin属性相似。正数会向外扩散，负数则向内收缩。详见下图：
效果展示
下面是一个简单的Demo。
实际应用
我这里举了三个例子分别是无限滚动，图片懒加载以及标题和导航联动：
