js判断元素进入视线范围内和移除视线范围

getBoundingClientRect.md

function isElementInViewport(el) {
        var rect = el.getBoundingClientRect();
        return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) && /*or $(window).height() */
                rect.right <= (window.innerWidth || document. documentElement.clientWidth) /*or $(window).width() */
        );
    }
    function givenElementInViewport (el, fn, fn1) {
        return function () {
            if (isElementInViewport(el)) {
                fn.call();
            }else{
            	fn1.call();
            }
        }
    }
    function addViewportEvent (el, fn, fn1) {
        if (window.addEventListener) {
            addEventListener('DOMContentLoaded', givenElementInViewport(el, fn, fn1), false);
            addEventListener('load', givenElementInViewport(el, fn, fn1), false);
            addEventListener('scroll', givenElementInViewport(el, fn, fn1), false);
            addEventListener('resize', givenElementInViewport(el, fn, fn1), false);
        } else if (window.attachEvent)  {
            attachEvent('DOMContentLoaded', givenElementInViewport(el, fn, fn1));
            attachEvent('load', givenElementInViewport(el, fn, fn1));
            attachEvent('scroll', givenElementInViewport(el, fn, fn1));
            attachEvent('resize', givenElementInViewport(el, fn, fn1));
        }
    }
    var test = document.querySelector('#eq');
    addViewportEvent(test,function(){
      console.log("in")  
    },function(){
      console.log("out")  
    })