在滚动到某个对象后,当该对象可见时触发该对象

基本上,当你每次看到一篇新文章时向下滚动一页,它就会变为活动的,你可以应用各种漂亮的效果,当它向外滚动时,它就会变为非活动的。

希望这能解释我在寻找什么:

#<article>              #
#<h2> Entry 1</h2>      #
#<p> lorem ipsum</p>    # // this area is out of the screen
#</article>             #
#<article class=active> #
#<h2> Entry 2</h2>      #
------------------------- // from here one this area is visible
|<p> lorem ipsum</p>    |
|</article>             | // scroll past here the previous article loses .active 
|<article>              | // and this article becomes .active
|<h2> Entry 3</h2>      |
|<p> lorem ipsum</p>    |
|</article>             |
|<article>              |
|<h2> Entry 4</h2>      |
|<p> lorem ipsum</p>    |
|</article>             |

编辑 基本上,我的目标是文章列表非常小(图像和字体大小),但最上面的文章在可见时会显示为全尺寸,而在另一篇文章激活时会再次缩小。