javascript - 画像を JavaScript に置き換えるとページで Jquery が無効になるのはなぜですか?

Question

私の目標は、浮遊する緑色のボックスがスクロールをたどり、選択した特定のポイントで停止するようにすることでした. 私が望むほどスムーズではありませんが、ほとんどの場合、これを達成しました。私の主な問題は、緑色のボックスをjavascriptに置き換えると、スクロールしても新しいjavascriptがページを下にたどらなくなったことです。何らかの理由で、以前は機能していた jquery を無効にしているようです。

<div id="follow><img><div> <-- Works 
<div id="follow><javascript><div> <-- Does Not Work

また、緑色のボックスをそのままにして、本文の別の場所に JavaScript を配置しても、このコードが機能しなくなることにも気付きました。これがなぜなのか、それを修正するために何ができるのか考えていますか?

ここで私のデモを参照してください --> http://jsfiddle.net/Kachish/RqELN/18/

  .follow { 
    position: absolute;}
​
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(window).load(function(){
    $(document).scroll(function() {
    var scrollVal = $(document).scrollTop();
    $('.follow').css('top',scrollVal+'px');
    if (scrollVal < 250) { 
    $('.follow').css('top','150px');
    }
    if (scrollVal > 547) {
    $('.follow').css('top','375px');    
    }
    });
    });//]]>  
    </script>