JQUERY判断元素是否在可视区

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

$('#item').offset().top
#item 的绝对偏移量,指#item的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这个值不随窗口滚动而改变

$('#item').outerHeight()
#item 的实际尺寸,即 height+padding+border

$('#item').outerHeight(true)
#item的实际尺寸及外边距,即 height+padding+border+margin

$(window).scrollTop()
窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的能够理解成整个页面滚动了多少距离

$(window).height()
浏览器窗口可视区域的高度
用脚后跟想一想就能想到,在窗口上下滚动的状况下,一个页面元素的状态有3种,1.向上滚动超出可视区域,2.向下滚动超出可视区域,3.在可视区域内.很明显,咱们须要的就是1和2两种状况. 状况1: 因为元素随页面向上滚动,因此天然能想到,在页面顶部偏移量不断增长的过程当中,边界是从上至下通过一段距离,而这个距离的区域刚好就是元素自己的偏移量加上元素自己的高度,因此当

$(window).scrollTop()>($('#item').offset().top+$('#item').outerHeight())
这个表达式结果为true时,表示元素已经向上滚动,并超出了可视区域.
状况2: 与状况1相反,向下滚动的过程,页面顶部的偏移量是在不断减小中,因此当它小于元素偏移量与可视区域高度的差值的时候,元素则向下并超出了可视区域,即

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

那么结论就是将这两种状况做或运算便可达到目的.如下表达式结果若是为true,则 #item 不在可视区域内.反之则在可视区域内.

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

http://www.cnblogs.com/3body/p/5417198.html