Javascript 导航活动类无法工作，因为列表中有图像

我创建了一个用于帮助查看工作代码的

我一直在尝试实现自动更改活动列表项颜色的粘性菜单。但我现在在中心添加一个图像作为列表项之一

不知怎的，它破坏了导航激活代码

我也有一个代码，是假设使img去保证金顶部：-29%；当用户滚动超过50像素时。由于某种原因，它不会出现在JSFIDLE上，但会起作用

起初我认为是第二个脚本与之冲突。然后我注意到它在第三个列表项上被打断

我是不是做了什么事打破了它？我不太清楚为什么它会破坏代码的势头。有人能指引我吗

PS：这可能有帮助，也可能没有帮助，但我在控制台上也遇到了这个错误

Uncaught TypeError: Cannot read property 'top' of undefined 

Uncaught TypeError: Cannot read property 'top' of undefined (index):543
(anonymous function) (index):543
p.event.dispatch jquery.min.js:2
g.handle.h

第543行来自脚本

var divPos = $(theID).offset().top; // get the offset of the div from the top of page

无论我请求帮助的问题是什么，此错误都是可见的，但通常不会影响我的用户体验

我的javascript知识是基础的，我无法真正理解我是如何破坏代码的。请帮忙

编辑： 我尝试删除图像，效果很好

感谢jtorrescr，我已经能够实现我所需要的，但现在我在控制台上面临着不断的错误

Uncaught Error: Syntax error, unrecognized expression:
Z.error
bg
Z.compile
bm
h.querySelectorAll.bm
Z
p.fn.extend.find
p.fn.p.init
p
(anonymous function)
p.event.dispatch
g.handle.h

//for the js line
var divPos = $(theID).offset().top; // get the offset of the div from the top of page

---

您的问题是，代码可能是您将要与

中的所有元素交互的代码。通过添加额外的元素和最重要的避免与之交互，您需要更改代码。这是您可以使用的解决方案：代码

只需添加if以排除要使用的元素：

for (var i=0; i < aArray.length; i++) {
                  if(aArray[i]!='index.php')
                  {
                      var theID = aArray[i];
                      var divPos = $(theID).offset().top; // get the offset of the div from the top of page
                      var divHeight = $(theID).height(); // get the height of the div in question

                          if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
                              $("a[href='" + theID + "']").addClass("nav-active");
                          } else {
                              $("a[href='" + theID + "']").removeClass("nav-active");
                          }
                  }
              }

for（变量i=0；i=divPos&&windowPos<（divPos+divHeight））{
$（“a[href=”“+theID+”））.addClass（“nav活动”）；
}否则{
$（“a[href=”“+theID+”]”）removeClass（“导航活动”）；
}
}
}

---

为了更灵活地进行操作，您可以请求id并使用它而不是索引，这样您就可以将其作为家庭作业

您是否可以在添加图像之前添加代码，以便能够比较图像以查看您以前的结果？感谢您的回复。我只是在最后加了一句，这很有道理。我尝试使用您在我的代码中进行的编辑，但不知何故仍然忽略了最后一个列表项。但是，您编辑的JSFIDLE代码工作得非常好。知道我为什么一直得到“uncaughttypeerror:cannotreadproperty'top'of undefined”error吗？？一切正常，但在控制台上显示100个错误。是的，如果你缩小屏幕（通过调整浏览器大小来降低屏幕高度），你会发现它工作得非常完美。这是因为您使用的代码未检测到屏幕已结束，并且最后一个div未触发活动事件。我将查看它，看看是否可以为您提供一个解决方案。我现在使用的计算机没有在JSFIDLE中测试它的分辨率，但是尝试一下，如果（windowPos+windowHeight==DochHeight）将==替换为>=则查找此代码，并查看这是否解决了您的问题。我确实尝试过，最后一个确实变为活动状态。但我仍然得到了未捕获的错误。。。另外，我一直在尝试在div开始之前让active启动大约10%，因为您可以看到，粘性菜单隐藏了div的顶部，所以当它确实启动时，div在另一个站点的导航下是一个。我使用了相同的代码，并在

var windowPos=$（window.scrollTop（）+20；/）之后添加了+20获取窗口从页面顶部的偏移量

，但在这里它不起作用