ユーザーが下にスクロールすると変化する画像があります（以下のコードを参照）。
現時点では、スクロールが開始された時点で開始されますが、ユーザーがページ上の特定のポイント (またはピクセル) にスクロールしたときにのみ変更を開始したいと考えています。
これを実現するには、以下に何を追加する必要がありますか? ご協力とご回答ありがとうございます。
<div class='fauxcolumn-outer fauxcolumn-right-outer'>
<div style='position:relative'/>
<style>
#photo { position: absolute; top:3px; right:29px; z-index:1 }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<script>
var urls = [
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg"
];
$(function(){
$(window).scroll(function(){
var i = Math.min(Math.floor($(window).scrollTop()/50), urls.length-1)
$("#photo img").attr("src", urls[i]);
});
});
</script>
<body>
<div id='photo'><img src='http://abcd.jpg'/>
</div>
</body>