Question

我正在尝试将包含飞机图像的固定div移动到右侧，并在页面从顶部向下滚动时淡入0。

网站：http://wp.ccrcc.org

我在JSFiddle（http://jsfiddle.net/G4t4f/77/）中运行良好，但在我的Wordpress网站的页脚中。我显然在这里遗漏了一些东西。这可能不是最好的方法，因为该站点使用bootstrap.min.js在bootstrap 3.0.3上运行？

<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

原因是wordpress如何初始化jQuery。看看这里：jQuery noConflict Wrappers。在“无争议”模式下，$快捷方式不可用，并且使用了更长的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
});

代码在JSFiddle中工作，但不在浏览器中工作

2 个答案: