神秘“TypeError:navWrap.offset()未定义”

时间:2017-01-01 17:15:34

标签: javascript jquery wordpress undefined

我完全被这个问题所困扰,有没有人知道问题可能是什么?

我想在我的自定义js文件中添加的代码(在Wordpress中)是:

var navWrap = jQuery('#sidebarnavWrap'),
    nav = jQuery('#sidebarnav'),
    startPosition = navWrap.offset().top,
    stopPosition = jQuery('#footer-three').offset().top - nav.outerHeight();

jQuery(document).scroll(function () {
//stick nav to top of page
var y = jQuery(this).scrollTop()

  if (y > startPosition) {
      nav.addClass('sticky');
      if (y > stopPosition) {
          nav.css('top', stopPosition - y);
      } else {
          nav.css('top', 0);
      }
  } else {
    nav.removeClass('sticky');
} 
});

此代码在jsfiddle中完美运行。然而,当我在我的WordPress网站上使用时,控制台提到“ TypeError:navWrap.offset(...)未定义

http://jsfiddle.net/ykto7uu9/42/

你们中的任何人都知道可能导致这种情况的原因吗? 非常感谢你。

额外信息:我的自定义js文件已经包含一个非常简单的工作jQuery代码来显示/隐藏文本(没有冲突),我使用以下函数将函数放入functions.php中

function my_javascripts() {
wp_enqueue_script( 'js.custom', '/wp-content/themes/mytheme-child/js/js.custom.js', array() );
}
add_action( 'wp_enqueue_scripts', 'my_javascripts', 1000 );

1 个答案:

答案 0 :(得分:1)

您正在将JS加载到页面的开头,而不是等待准备好的回调。在代码触发时,没有sidebarnavWrap元素。

将整个JS代码块包装在:

jQuery(document).ready(function() {

    // CODE HERE

});

我还建议您对入队脚本调用进行一些调整。

  1. 您正在使用jQuery,因此将其定义为依赖
  2. 将脚本移至页脚
  3. 更新版本:

    wp_enqueue_script( 'js.custom', '/wp-content/themes/mytheme-child/js/js.custom.js', array( 'jquery' ), false, true );
    

    https://developer.wordpress.org/reference/functions/wp_enqueue_script/