如何判断一个元素是否在可视区域内

在制作移动端的页面时，当页面上有视频并且正在播放时，如何让视频在消失的时候停止播放，之后便针对这个问题进行解决。
首先，我们先了解一下几个概念，先假设该元素为$(“#main”)

1.元素距离页面顶部的距离
var mainOffsetTop = $(“#main”).offset().top;

2.元素的高度
var mainHeight = $(“#main”).height();

3.页面滚动的距离
var windowScrollTop = $(window).scrollTop();

4.浏览器可见区域的高度
var windowHeight = $(window).height();

下面我们就来看一下如何判断该元素是否在可视区域内呢？在窗口上下滚动的情况下, 一个页面元素的状态有下面3种：
1.向上滚动超出可见区域
2.向下滚动超出可视区域
3.在可视区域内

第一种情况   由于元素随页面向上滚动, 整个页面滚动的距离  大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
第二种情况   由于元素随页面向下滚动, 整个页面滚动的距离  小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出