jQuery航路点在页面底部触发

因此，由于我对jQuery了解不多，而且主要是复制和粘贴代码，而我仍然试图理解它们，所以在最后一部分——理解中，我大部分都失败了。 那么，现在我的问题是： 我正在构建一个带有导航的Onepager，上面有4个导航点：工作、技能、关于、联系（相同id）。 我试图在达到某个跨度时切换一个类，以便突出显示导航中的链接。 这在页面底部的contact之前都可以正常工作。 所以我已经搜索了很长时间，发现它可能与offset属性有关。但我就是不知道如何添加它，所以当用户到达页面底部时，最后一个航路点会触发，而当底部看不见时，最后一个航路点也会触发

这是迄今为止我的js代码：

$('#work').waypoint(function(direction) {
  $('#nav-work').toggleClass('nav-hover', direction === 'down');
});
$('#skills').waypoint(function(direction) {
  $('#nav-work').toggleClass('nav-hover', direction === 'up');

});
$('#skills').waypoint(function(direction) {
  $('#nav-skills').toggleClass('nav-hover', direction === 'down');
});
$('#about').waypoint(function(direction) {
  $('#nav-skills').toggleClass('nav-hover', direction === 'up');
});

$('#about').waypoint(function(direction) {
  $('#nav-about').toggleClass('nav-hover', direction === 'down');
});
$('#contact').waypoint(function(direction) {
  $('#nav-about').toggleClass('nav-hover', direction === 'up');
});

$('#contact').waypoint(function(direction) {
  $('#nav-contact').toggleClass('nav-hover', direction === 'down');
  {offset:'bottom-in-view'};
});

正如你所看到的，我已经尝试了最后一部分的一些东西，但这对我来说根本不起作用。 另外：我正在构建一个完全响应的站点，避免像素的高度和宽度。我主要与vh和vw合作。 另一个注意事项：我的页脚高度是20vh。 这意味着可以通过所有设备工作

我真的很感谢你的帮助，因为我已经在这里和互联网上浏览了所有相关的话题，只是找不到一个解决方案

为了更清楚，我将尝试向您提供html和css的相关代码部分（因为整个页面的代码太多，无法提供良好的概述）

---

我希望这能有所帮助：）

看看这个Jsbin：

我使用的是waypoints的无依赖版本，基本上默认情况下，waypoints会检查整个元素是否在视图中，添加一个小的视图点偏移可以修复任何滚动问题。以下是联系人元素的代码

   //This is the code for the bottom div (or in your case a span) 
var waypoint = new Waypoint({
  element: document.getElementById('contact'), //Select element
  handler: function(direction) {
    $('span').removeClass('nav-hover');
    // The preceding line just removes all elements with nav-hover class, deselecting them
    $('#nav-contact').addClass('nav-hover');
    // This line just adds the nav-hover class
  },
  offset: 3 // Tells waypoint to instantiate when the element is 3px away from the top 
});

变量Waypoint到Waypoint4将替换现有js。此外，航路点的版本已更改为以下版本

 <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/noframework.waypoints.min.js"></script>

应该是：

 $('#contact').waypoint(function(direction) {
  $('#nav-contact').toggleClass('nav-hover', direction === 'down');
}, {
  offset: 'bottom-in-view' 
});

---

{offset…}部分应该是刚刚放入函数的航路点中的另一个参数

你能发布一个JSFIDLE或一个jsbin吗？整个JSFIDLE对我来说似乎很难，因为我在这里的个人电脑上创建了这个页面，而且已经有很多代码需要花费很长时间才能传输。。但我会尝试过滤相关部分，并将其添加到上面的问题中，非常感谢您的帮助-但仍然不起作用：（更糟糕的是，我从您的Jsbin中尝试了代码，调整到我的nav id，然后再也不起作用了。有没有办法使用上面的代码？因为除了“联系人”部分，位于页脚的底部。请参见我的更新编辑，您使用的版本似乎与jquery依赖项有关，而我不是导致代码中断的原因。您可能需要修改偏移量属性才能获得所需的结果。是的，这可能是真的：）但是谢谢你！现在它工作得很好，尽管我仍然需要处理偏移量，所以它看起来很平滑：）就像我想的那样……我只是不明白，如何在代码中包含“偏移量”-属性：）所以，非常感谢你！你帮了我很多忙！

 <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/noframework.waypoints.min.js"></script>

$('#contact').waypoint(function(direction) {
  $('#nav-contact').toggleClass('nav-hover', direction === 'down');
  {offset:'bottom-in-view'};
});

 $('#contact').waypoint(function(direction) {
  $('#nav-contact').toggleClass('nav-hover', direction === 'down');
}, {
  offset: 'bottom-in-view' 
});