javascript - スクロール時にアニメーション付きの画像を追加する

Question

これが可能かどうか、またその方法を教えていただけるかどうかお尋ねしたいと思います。ここに私のものがあります: 私は、logo3.png(大きなバージョン) の div と、その下の粘着性のあるナビゲーション バーを持っています。

http://jsfiddle.net/34Qw5/

<div id="logo_container">
<center><img src="images/Logo3.png" alt="My Company"/></center>
</div>
<div id="header_navi">
    <table width="50%" border="0">
      <tr>
        <td><a href="#"><img class="home_navi" data-alt-src="images/home_over.png" src="images/home.png" /></a></td>
        <td><a href="#"><img class="portfolio_navi" data-alt-src="images/portfolio_over.png" src="images/portfolio.png" /></a></td>
        <td><a href="#"><img class="quote_navi" data-alt-src="images/get_a_quote_over.png" src="images/get_a_quote.png" /></a></td>
        <td><a href="#"><img class="careers_navi" data-alt-src="images/careers_over.png" src="images/careers.png" /></a></td>
      </tr>
    </table>
</div>

下にスクロールしてナビゲーション バーが上部に到達すると、上部にくっついて大きなロゴが非表示になり、正常に動作します。今、私がやりたいことは、ナビゲーション バーが上部に達したときに、小さなバージョンのロゴ (logo_small.png) をナビゲーション バーの左側に追加することです。助けてください？

前もって感謝します！