如何判断一个元素刚好出现在可视窗口中？

Question

在窗口滚动过程中，如何判断一个元素出现在可视窗口中？

Answer 1

使用getBoundingClientRect()方法能够获取到指定的元素在当前viewpoint中的位置
这个viewpoint就是浏览器的可是窗口

Answer 2

$.fn.isOnScreen = function(){    
      var win = $(window);       
      var viewport = {
          top : win.scrollTop(),
          left : win.scrollLeft()
      };
      viewport.right = viewport.left + win.width();
      viewport.bottom = viewport.top + win.height();
       
      var bounds = this.offset();
      bounds.right = bounds.left + this.outerWidth();
      bounds.bottom = bounds.top + this.outerHeight();
       
      return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
       
  };

Answer 3

元素的 offsetHeight 值 和 滚动过程中的 scrollTop 值去做比较，可以得出吧

Answer 4

有个插件很好用 waypoint

Answer 5

每个元素有offsetTop属性，表示该元素到页面顶部的距离；页面有scrollTop属性，表示滚动条竖直方向滚动的距离；当　页面高度＋scrollTop > offsetTop 时，即是元素出现在页面时。