jQuery Waypoints 在页面底部触发

Question

因此，由于我对 jQuery 了解不多，并且主要是复制和粘贴代码，虽然我仍然尝试理解它们，但我在最后一部分 - 理解上大多失败了。 好吧，现在解决我的问题： 我正在构建一个带有导航的 Onepager，顶部有 4 个导航点：工作、技能、关于、联系方式（相同的 ID）。 我试图在达到某个跨度时切换一个类，以便突出显示导航中的链接。 这可以很好地联系 - 位于页面底部。 所以我已经搜索了一段时间，发现它可能需要对 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的相关代码部分（因为整个页面的代码太多了，不能很好地概述。）

HTML:

    <!--Nav-->
            <div class="sticky-nav">
                <a href="#start"><img src="images/Bildmarke.svg" alt="home"></a>
                <p>lisa röhl</p>
                <ul>
                    <li><a class="nav" id="nav-contact" href="#contact">contact</a></li>
                    <li><a class="nav" id="nav-about" href="#about">about</a></li>
                    <li><a class="nav" id="nav-skills" href="#skills">skills</a></li>
                    <li><a class="nav" id="nav-work" href="#work">work</a></li>
                </ul>
            </div>
<span class="anchor-work" id="work"></span>
<span class="anchor" id="skills"></span>
<span class="anchor" id="about"></span>
<span class="anchor" id="contact"></span>

CSS：

.nav:hover{
        color:#e76600 !important;
    }
    .nav-hover{
        color:#e76600 !important;
    }
.contact-down{
    height:20vh;
    background-color:#2b3534;
} /*Note:This is the css of the div, where the contact-part is in - so the height of the "footer"*/

我希望这会有所帮助:)

Answer 1

看看这个Jsbin：http://jsbin.com/fobecunaye/edit?html,css,js

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

   //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 
});

Variables Waypoint throught 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'};
});

应该是：

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

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