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

我试图将包含飞机图像的固定div移动到右侧，并在页面从顶部向下滚动时淡入0。代码在JSFiddle中工作，但不是浏览器

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

我工作正常的jsfiddle（http://jsfiddle.net/G4t4f/77/），但在我的WordPress网站的页脚。我显然在这里失去了一些东西。这可能不是最好的方法，因为该网站在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>

来源

2014-01-30 user3192829

您是否尝试过将JS包装到文档就绪函数中？取决于WordPress如何组装您的网站，它可能不会执行该代码。 –

在代码运行时，它看起来像是破坏了$。你可以解决，在短期内通过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(); 
    }); 
});

来源

2014-01-30 06:17:47

谢谢！这就是诀窍！有一天，我想让飞机从左侧飞回到位置，当滚动回scrollTop（），但那是另一个梦想。目前来看，这个效果很好！ – user3192829

@ user3192829看看：http://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event这可以给你一个想法如何检测滚动方向。 –

这样做的原因是WordPress的是如何初始化的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 
});

来源

2014-01-30 06:45:59

感谢您的解释。 – user3192829

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

回答

相关问题