控制div滚动到可视区域再播放动画（包括初始位置在可视区域上方、向上滚动再执行动画）
控制条件主要是两个要素：
盒子的上边框到可视区域下边框的距离要大于零（top替代）
盒子下边框到可视区域上边框的距离要大于零（bottom替代）
参考了这张图：

image.png

以及getBoundingClientRect( )方法
getBoundingClientRect( )方法会返回一组矩形的集合

var box=document.getElementById('box');         // 获取元素

alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

top的计算方法采用了
可视窗口的高度-Math.abs(元素上边距离页面上边的距离)
绝对值的原因是因为当div整个在可视窗口上方时元素上边距离页面上边的距离是负值
bottom= 元素下边距离页面上边的距离
实例代码

    windowScroll () {
      const bottom = document.querySelector('.fade').getBoundingClientRect().bottom
      const client = document.documentElement.clientHeight
      const top = client - Math.abs(document.querySelector('.fade').getBoundingClientRect().top)
      const coop = document.querySelector('.fade')
      console.log(bottom, 'bottom')
      console.log(top, 'top')
      if (bottom > 0 && top > 0) {
        coop.classList.add('coop')
        // coop.style.visibility = 'visible'
      }
    }

参考：https://blog.csdn.net/weixin_42557996/article/details/103158928?utm_medium=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect