判断元素是否在可视范围内

假设此元素为 #box,先说几个关键的属性:

1. $(‘#box’).offset().top
      #box的绝对偏移量,指#box的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这个值不随窗口滚动而改变
2. $(‘#item’).outerHeight()
      #box的实际尺寸,即 height+padding+border
3. $(‘#box’).outerHeight(true)
      #box的实际尺寸及外边距,即 height+padding+border+margin
4. $(window).scrollTop()
      窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离
5. $(window).height()
      浏览器窗口可视区域的高度

窗口上下滚动的情况下,一个页面元素的状态有3种,

1.向上滚动超出可视区域,

2.向下滚动超出可视区域,

3.在可视区域内.

很明显,我们需要的就是1和2两种情况. 

情况1:
由于元素随页面向上滚动,所以自然能想到,在页面顶部偏移量不断增加的过程中,边界是从上至下经过一段距离,而这个距离的区域恰好就是元素本身的偏移量加上元素本身的高度,所以当

$(window).scrollTop()>($('#box').offset().top+$('#box').outerHeight())

这个表达式结果为true时,表示元素已经向上滚动,并超出了可视区域.

情况2:
与情况1相反,向下滚动的过程,页面顶部的偏移量是在不断减少中,所以当它小于元素偏移量与可视区域高度的差值的时候,元素
则向下并超出了可视区域,即

$(window).scrollTop()<($('#box').offset().top-$(window).height())

那么结论就是将这两种情况作或运算即可达到目的.以下表达式结果如果为true,则 #box不在可视区域内.反之则在可视区域内.

($(window).scrollTop()>($('#box').offset().top+$('#box').outerHeight()))||(($(window).scrollTop()+$(window).height())<$('#box').offset().top)

 

转载于:https://my.oschina.net/u/2951571/blog/880631