平滑滚动并突出显示导航问题

Smooth scrolling and highlighted navigation issue

本文关键字:显示 导航 问题 滚动 平滑      更新时间:2023-09-26

在我的网站上http://goo.gl/34oQ8我已经在本教程的基础上实现了带有高亮导航的平滑滚动http://trevordavis.net/blog/jquery-one-page-navigation-plugin/如果没有"联系我们"项目,效果很好,但使用它时不起作用(只有"与我们联系"菜单项亮起)。你知道为什么吗?怀疑它与#inline ref-tks 有关

<ul id="nav">
  <li class="current"><a href="#presentation">Home</a></li>
  <li><a href="#equipe">Team</a></li>
  <li><a href="#plan-activite">About us</a></li>
  <li><a href="#medias">Press</a></li>
  <li><a href="#inline" class="modalbox">Contact Us</a></li>
</ul>

问题是单页导航插件没有处理隐藏元素。当它初始化时,它用以下行计算每个元素的垂直位置:

self.sections[linkHref] = Math.round(topPos) - self.config.scrollOffset;

但是,隐藏的#inline元素的垂直位置为0,这会抛出当前的节检测代码。

您可以通过使其在加载页面时隐藏的内联元素的位置不为0来解决此问题。我建议不要对联系人表单使用模态对话框,只使用以div为中心的常规表单即可

要在不更改代码的情况下查看修复,请使用chrome开发工具或类似工具在jquery.nav.js中的第126行放置一个断点。然后,运行this.sections.inline=5000;'在控制台中。删除断点,导航将正确更新。