코드는 JSFiddle에서 작동하지만 브라우저는 작동하지 않습니다.

Question

비행기의 이미지가 포함 된 고정 div를 오른쪽으로 이동하려고하며 페이지가 맨 위에서 아래로 스크롤 될 때 0으로 희미합니다.

사이트 : http://wp.ccrcc.org

내가 JSFiddle (http://jsfiddle.net/G4t4f/77/)에서 잘 작동하지만 내 워드 프레스 사이트의 바닥 글입니다. 나는 분명히 여기에 뭔가 빠져있다. 이것은 사이트가 bootstrap 3.0.3에서 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

코드가 실행될 때까지 무언가가 $ 인 것처럼 보입니다. 이 같은 jQuery 대신 $를 사용하여 단기적으로 그 해결 수 : 이것에 대한

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

Answer 2

이유는 워드 프레스가 jQuery를 초기화하는 방법입니다. 여기보세요 : jQuery noConflict Wrappers. "no-confict"모드에서는 $ 단축키를 사용할 수없고 더 긴 jQuery가 사용됩니다. 다음 구성은 시간 절약입니다.

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