Question

我创建了一个jsfiddle来帮助查看工作代码。

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

不知何故，它破坏了导航活动代码。

我还有一个代码可以让img变为margin-top：-29％;当人滚动超过50像素。因为某种原因没有出现在jsfiddle但是有效。

起初我认为是第二个与之相冲突的脚本。然后我注意到它打破了第三个列表项。

我做了什么打破它吗？我不太清楚为什么它应该打破代码的势头。有人可以指导我吗？

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的了解是基本的，我无法理解我是如何破坏代码的。请帮忙！

编辑：我尝试删除图片并且工作正常here

感谢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

Answer 1

您的问题是代码假设您要与<ul>中的所有元素进行交互。通过添加一个额外的元素，最重要的是避免与它进行交互，您需要更改代码。这是您可以使用的解决方案：代码http://jsfiddle.net/Ap4QM/25/

只需添加一个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");
                          }
                  }
              }

要做得更灵活你可以要求id并使用它而不是索引，所以你可以把它作为家庭作业

导航活动类因列表中的图像而无法工作

1 个答案: