jQuery/Mootools 偏移量返回 null答案

【问题标题】：JQuery/Mootools offset returns nulljQuery/Mootools 偏移量返回 null
【发布时间】：2013-05-29 17:21:50
【问题描述】：

我正在使用 jQuery 和 mootools 库，但出现此错误

TypeError: offset is null

 [Parar en este error]  
 if (jQuery(window).scrollTop() > offset.top) {

这是代码：

<link rel="stylesheet" type="text/css" href="default.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="wp-styles.css" media="screen"/>
<link rel="stylesheet" href="css/ui.css" type="text/css" />
<link rel="stylesheet" href="css/horizontal.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    (function(jQuery){

        var offset = jQuery("#bichito").offset();
        var topPadding = 200;
        jQuery(window).scroll(function() {
            if (jQuery(window).scrollTop() > offset.top) {
                jQuery("#bichito").stop().animate({
                    marginTop: jQuery(window).scrollTop() - offset.top + topPadding
                });
            } else {
                jQuery("#bichito").stop().animate({
                    marginTop: 0
                });
            };
        });
    })(jQuery);
</script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/ajax.js"></script>
<script type="text/javascript" src="Scripts/mootools-1.2-core.js"></script>
<script type="text/javascript" src="Scripts/mootools-1.2-more.js"></script>
    <!--[if IE]>
        <script type="text/javascript" src="scripts/excanvas-compressed.js"></script>
    <![endif]-->
<!--[if lt IE 7]>
<script defer type="text/javascript" src="Scripts/pngfix.js"></script>
<![endif]-->

<script type="text/javascript" src="Scripts/mocha.js" charset="utf-8"></script>
<script type="text/javascript" src="Scripts/slideitmoo-1.1.js"></script>

<script type="text/javascript">


window.addEvent('domready', function(){
        $$('.comprar').each(function(btnCompra) {
                    btnCompra.addEvent('click',function(event){

。 . . 还有更多的 mootools 功能。如果我只使用它工作的 jquery 代码，与 mootools 函数相同，但两者都没有。提前致谢。

【问题讨论】：

这个版本的mootools 太旧了，根本不应该使用，它也不能和其他库一起玩'nice'。您可以使用的最旧版本是 1.2.6，即使是我也不推荐。 1.4.5 还是不要打扰。
感谢 Dimitar，我尝试了这个，但不起作用。
我已经修复了，我把 jquery 代码放在最后。
实际上 Mootools 在其他框架中的表现一直都比较好（$ 函数没有激进的主张），但它可能会在内部崩溃。后来它在内部被扩展为与 $ 无关，以更好地发挥。

标签： jquery null mootools offset

【解决方案1】：

如果在空集合上调用 jQuery offset() 方法，则返回 undefined。您似乎在加载 DOM 之前运行了 jQuery 代码，而您的 jQuery("#bichito") 元素此时不存在。

您可以像这样修复您的代码：

jQuery.noConflict();
(function(jQuery){ // <-- do you really need closure here?
    jQuery(function(){ // <-- wait DOM ready

        var offset = jQuery("#bichito").offset();
        var topPadding = 200;
        jQuery(window).scroll(function() {
            if (jQuery(window).scrollTop() > offset.top) {
                jQuery("#bichito").stop().animate({
                    marginTop: jQuery(window).scrollTop() - offset.top + topPadding
                });
            } else {
                jQuery("#bichito").stop().animate({
                    marginTop: 0
                });
            };
        });
    });
})(jQuery);

【讨论】：