未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义的

Question

我正在尝试根据元素何时到达页面顶部（标题为-180px）添加类，但我似乎无法使偏移顶部值起作用。

我使用窗口加载，因为图像的大小有助于决定每个部分的高度。您可以在此处查看实时示例http://www.amypreston.co.uk/

$(window).load(function() {
    var $header = $("header");
    var numberOfSections = $("section").length;   
    var sectionOffsets = [];

    for(var i = 0; i < numberOfSections + 1; i++) {
        sectionOffsets.push($('section').eq(i).offset().top);            
    }            

    $(window).scroll(function() {
        var scrollTop = $(this).scrollTop();            

        for(var i = 0; i < numberOfSections + 1; i++) {
            if(scrollTop > sectionOffsets[i] - 180) {
                $header.removeClass().addClass("project" + (i + 1));                         
            }
        }
    });
});

Answer 1

您应该从语句

中删除+ 1

for(var i = 0; i < numberOfSections + 1; i++) {

应该是

for(var i = 0; i < numberOfSections; i++) {

Answer 2

删除+1

使用此代码

  for(var i = 0; i < numberOfSections; i++) {
        sectionOffsets.push($('section').eq(i).offset().top);            
    }