getBoundingClientRect() 方法会返回该元素盒模型距离浏览器窗口的 top, bottom, left, right 值，其中上下的值有大于 0 并且左右的值有大于 0 则是证明其处于当前窗口位置。比如你在当前页控制台运行如下代码：

function isShow() {
    var article = document.querySelector("article");
    var box = article.getBoundingClientRect(),
        show = (box.top>0 || box.bottom>0) && (box.left>0 || box.right>0);   
    console.log( "%c$('article') 元素 " + (show?"在":"不在") + "当前窗口中显示", "color:"+(show?"green":"red") );
} 
(window.onscroll = isShow)();

关于函数更多的说明请自行查看 MDN ：https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

区分文档坐标和浏览器坐标即可

document.body.scrollTop可以取屏幕当前滚动到什么位置，document.body.clientHeight可以取当前屏幕的高度，结合这两者可以知道现在显示的是哪块内容。

$('element').offset()可以得到某元素相对于body的偏移得到{top: y, left: x}值，和上面结合你就知道这块内容有没有显示出来。

剩下来的你应该可以自己做了。

其实类似的应用不少，比如随着页面滚动加载露出的图片：lazyload。

楼上正解...