监听滚动条实现到固定位置时触发事件

最近在做毕设，其中有一个地方需要做一个当滚动条到一定位置时图片能自动飞入的特效，通过参考网上的资料做了一个简单的飞入特效。
css

#box{
        position: relative;
        width: 1000px;
        height: 490px;
        margin:200px auto 0;
    }
    #box img{
        position: absolute;
    }
    #box img:nth-child(1){
        /*left:-8px;*/
        top:-148px;
        left:-1500px;
    }
    #box img:nth-child(1).on{
        left:-70px;
                width: 500px;
                height: 280px;
        transition: 0.5s 1s;
    }
    #box img:nth-child(2){         
        /*left:163px;*/
        top:178px;
        left:-1500px;
    }
    #box img:nth-child(2).on{
        left:-70px;
        transition: 0.5s 0.5s;
                width:500px;
                height: 280px;
    }


    #box img:nth-child(3){
        /*left:510px;*/
        top:-148px;
        left:1500px;
    }
    #box img:nth-child(3).on{
        left:570px;
        transition: 0.5s 0.5s;
                width: 500px;
                height: 280px;
    }
    #box img:nth-child(4){
        /*left:656px;*/
        top:178px;
        left:1500px;
    }
    #box img:nth-child(4).on{
        left:570px;
        transition: 0.5s 1s;
                width:500px;
                height: 280px;
    }

html的部分代码

        <div id="box">
                    <img src="img/xxxx.jpg">
                    <img src="img/xxxx.jpg">
                    <img src="img/xxxx.jpg">
                    <img src="img/xxxx.jpg">
                div>

监听滚动条我用了jQuery

$(document).ready(function () {
                $(window).scroll(function () {//获得滚动条距离顶部的高度
                    if ($(window).scrollTop() > 100) {
                        var box = document.getElementById("box");
                        var aImgs = box.getElementsByTagName("img");                       
                            for (var i = 0; i < aImgs.length; i++) {
                                aImgs[i].className = "on";
                            }
                    }
                });
            });