code works in JSFiddle but not browser

Question

I'm trying to move a fixed div containing an image of an airplane to the right and fade to 0 as the page is scrolled down from the top.

site: http://wp.ccrcc.org

I works fine in JSFiddle (http://jsfiddle.net/G4t4f/77/) but on in the footer of my Wordpress site. I'm obviously missing something here. This may not be the best way to do it anyway since the site is running on bootstrap 3.0.3 with bootstrap.min.js?

<style>
    #header-plane {
    z-index: 5;
    width: 400px;
    position: fixed;
    right: 550px;
    top: 200px;}
</style>

<div id="header-plane">
<img src="http://wp.ccrcc.org/wp-content/themes/ccrcc/images/plane-1.png" 
alt="R/C plane" width="400" height="162">
</div>

<div id="footer">
<script type="text/javascript">
  $( document ).ready(function() {
    function flyOut() {
        var top = $(document).scrollTop();
           if (top < 30) {
                 $('#header-plane').animate({
                    'right': '0',
                    'opacity': 0
                 }, 'slow', function() {
                 });        
              }
    }

    $(window).scroll(function () {
      flyOut();
    });
 });
</script>
</div>

Answer 1

It looks like something is breaking $ by the time your code runs. You could work around that in the short term by using jQuery instead of $, like this:

  jQuery( document ).ready(function() {
    function flyOut() {
        var top = jQuery(document).scrollTop();
           if (top < 30) {
                 jQuery('#header-plane').animate({
                    'right': '0',
                    'opacity': 0
                 }, 'slow', function() {
                 });        
              }
    }

    jQuery(window).scroll(function () {
      flyOut();
    });
 });