Javascript 未捕获类型错误：无法仅在本地读取属性_Javascript_Jquery

Javascript 未捕获类型错误：无法仅在本地读取属性

javascript jquery

Javascript 未捕获类型错误：无法仅在本地读取属性,javascript,jquery,Javascript,Jquery,我的javascript只有在本地运行时才有错误，但在JSFIDLE上运行时效果良好 Javascript var pos, scrollY, $el = $('nav'), navItems = $el.find('> span'), menuHeight = $el[0].clientHeight, sections = $('section').toArray(), //

我的javascript只有在本地运行时才有错误，但在JSFIDLE上运行时效果良好

Javascript

var pos, scrollY, 
    $el               = $('nav'),
    navItems          = $el.find('> span'),
    menuHeight        = $el[0].clientHeight,
    sections          = $('section').toArray(),  // cache elements
    pointOfAttachment = $el[0].getBoundingClientRect().top;

// Bind events
$(window).on('scroll.nav', updateNav)
         .on('resize.nav', updateNav);

function updateNav(){
    scrollY = window.pageYOffset || document.documentElement.scrollTop;

    for( var i = sections.length; i--; ){
        if( sections[i].getBoundingClientRect().top - menuHeight < 0 ){
            navItems.filter('.' + sections[i].id).addClass('active').siblings().removeClass('active');
            break;
        }
        navItems.removeClass('active');
    }

    if( scrollY > pointOfAttachment )
        $el.addClass('fixed');
    else
        $el.removeClass('fixed');
}

// for initial page load
updateNav();

$("nav span").click(function() {
    var sectionId = $(this).attr('class')
    $('html, body').animate({
        scrollTop: ($('#'+sectionId).offset().top - $('nav').height()) + 1
    }, 300);
});

var pos，滚动，
$el=$（'nav'），
navItems=$el.find（'>span'），
menuHeight=$el[0]。clientHeight，
sections=$（'section'）.toArray（），//缓存元素
pointOfAttachment=$el[0]。getBoundingClientRect（）.top；
//绑定事件
$（窗口）.on（'scroll.nav'，updateNav）
.on（'resize.nav'，updateNav）；
函数updateNav（）{
scrollY=window.pageYOffset | | document.documentElement.scrollTop；
对于（var i=sections.length；i--；）{
if（节[i].getBoundingClientRect（）.top-menuHeight<0）{
navItems.filter（'..+sections[i].id）.addClass（'active'）.sides（）.removeClass（'active'）；
打破
}
navItems.removeClass（“活动”）；
}
如果（滚动>附着点）
$el.addClass（“固定”）；
其他的
$el.removeClass（“固定”）；
}
//用于初始页面加载
updateNav（）；
$（“导航范围”）。单击（函数（）{
var sectionId=$（this.attr（'class'））
$（'html，body'）。设置动画({
scrollTop:（$（'#'+sectionId）.offset（）.top-$（'nav'）.height（））+1
}, 300);
});

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
</script>
<script src="script.js" type="text/javascript">
</script>
<title></title>
</head>
<body>
<header>Header</header>
<nav>
  <span class='a1'>Section 1</span>
  <span class='a2'>Section 2</span>
  <span class='a3'>Section 3</span>
</nav>
<div id='navPlaceholder'></div>

<section id='a1'>Some section..</section>
<section id='a2'>Another Section</section>
<section id='a3'>And another one</section>
</body>
</html>


标题
第一节
第二节
第三节
某一部分。。
另一部分
还有一个

当我在JSFIDLE上运行它时，它工作正常，但当我在本地运行它时，会出现javascript错误：

未捕获的TypeError:无法读取未定义的属性“clientHeight”

有人能告诉我为什么这只会发生在本地，以及我如何修复它吗？

一旦DOM准备好，您应该包括

脚本

：

   <script src="script.js" type="text/javascript">
</body>

例如，在这里，

结束标记之前，


也许您没有直接属于
的子项的
？您可以检查这一行var sectionId=$（this）.attr（'class'）并添加；在endSo中，$el[0]
未定义。也许就等着DOM出现吧ready@A.Wolff我就是这么想的。在JSFIDLE中，它通常在页面的onLoad事件之后运行js。在将任何元素添加到主体之前调用script.js
。如果在
结束标记之前包含此脚本，它将按预期工作