IntersectionObserver接口，提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法，祖先元素与视窗(viewport)被称为根(root);直接进入正题，IntersectionObserver 翻译为 "交叉观察者"，它的任务就是监听目标元素跟指定父元素（用户可指定，默认为viewport）是否在发生交叉行为，简单理解就是监听目标元素是否进入或者离开了指定父元素的内部。
上图中左图未有交叉，则不可见，右图中有交叉，则可见。
API接口：
let io = new IntersectionObserver(entries => {
entries.forEach(item => console.log(item));
// ...
}， options);
页面初始化的时候会触发一次
callback，entries为所有已监听的目标集合,以上为entries的内容。
boundingClientRect 目标元素的矩形信息
intersectionRatio 相交区域和目标元素的比例值 intersectionRect/boundingClientRect 不可见时小于等于0
intersectionRect: 目标元素和视窗（根）相交的矩形信息 可以称为相交区域
isIntersecting: 目标元素当前是否可见 Boolean值 可见为true
rootBounds: 根元素的矩形信息，没有指定根元素就是当前视窗的矩形信息
target: 观察的目标元素
time: 返回一个记录从`IntersectionObserver`的时间到交叉被触发的时间的时间戳
其他API：
let io = new IntersectionObserver(callback, options);
io.observe(document.querySelector('img')) 开始观察，接受一个DOM节点对象
io.unobserve(element) 停止观察 接受一个element元素
io.disconnect() 关闭观察器
吸底功能主要实现：intersectionRatio和isIntersecting是用来判断元素是否可见的
当大波动滑动时，通过isIntersecting可实现可见不可见效果，当滑动到边缘处时，如果intersectionRatio为0， 但可能在页面上还是有一小部分可看到，则需要做判断，intersectionRatio前后两次可能都为0，则可能是在边缘处小幅度滑动，若之前吸底，则现在不吸底；若之前不吸底，则现在吸底；否则，之前有值可见，现在为0不可见，就让其吸底。
即判断是否小于等于0，
