如何判断一个标签是否在浏览器窗口里了--原生态JS实现

有时候做一些特效需要判断标签是否在浏览器窗口里，这样可以产生一些动画之类的。

关键就在于如何用JavaScript判断标签是否在窗口里？

有HTML如下，写了三个DIV，分别id为 s1,s2,s3:

<div class="section s1" id="s1">
        <div class="box">
            <h1>你好1</h1>
            <div class="txt">
                你好你好你好你好你好你好你好你好你好
            </div>
        </div>
</div>
<div class="section s2" id="s2">
        <div class="box">
            <h1>你好2</h1>
            <div class="txt">
                你好你好你好你好你好你好你好你好你好
            </div>
        </div>
</div>
 <div class="section s3" id="s3">
        <div class="box">
            <h1>你好3</h1>
            <div class="txt">
                你好你好你好你好你好你好你好你好你好
            </div>
        </div>
</div>

关键CSS：

 *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
}
.section{
            width: 1200px;
            height: 600px;
            margin-left: auto;
            margin-right: auto; 
}

要判断标签是否在窗口里要用到四个距离：

距离 a ： 页面滚出窗口的距离：

 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

距离 b ： 标签到页面顶部的距离：

标签 ID.offsetTop

距离 c ：窗口的高度：

let winHeight = document.documentElement.clientHeight || document.body.clientHeight ;

距离 d ：标签本身的高度：

标签 id.offsetHeight

从图中可以看到，当：  b-a >= 0 且  a+c-b>0 的时候，标签就在窗口里了。

不过也要考虑一种极端情况，那就是标签本身很长，不过标签已经占据了窗口的绝大部分高度，比如 60% ，此时也应该算标签进入了窗口里。

此时：( b+d-a ) /c >0.6  且   a>=b 

因此 按照这思路JS 代码如下：

 let s1 = document.getElementById("s1"),
            s2 = document.getElementById("s2"),
            s3 = document.getElementById("s3");
let boxArr = [s1,s2,s3];
let scrollFun = function(e){
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            let winHeight = document.documentElement.clientHeight || document.body.clientHeight ;
            for(let i=0 ; i<=boxArr.length-1 ; i++){
                //  boxArr[i].offsetTop  标签距离页面顶部的距离
                let oTop = boxArr[i].offsetTop;
                let bH = boxArr[i].offsetHeight ;
                if( (oTop-scrollTop >= 0  && scrollTop+winHeight-oTop > 100 ) || ( (oTop+bH-scrollTop)/ winHeight>0.6 && oTop-scrollTop <= 0  ) ){
                    console.info( boxArr[i].id  );  // 如果进入到窗口，输出 id
                                                    // 在实际项目中可以执行动画
                }
            }
        };
window.addEventListener("scroll",scrollFun);
scrollFun();

不足之处，还望高手指出。