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

Answer 1

The reason for this is how wordpress initialize jQuery. Have a look here: jQuery noConflict Wrappers. In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used. The following construct is a timesaver:

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

Answer 2

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();
    });
 });