jQuery Waypoints 在页面底部触发

Question

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

我正在使用 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 
});

通过 Waypoint4 的变量 Waypoint 将替换您现有的 js。另外waypoint的版本也改成了下面的

 <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...} 部分应该是您刚刚放入函数中的航点中的另一个参数。

jQuery Waypoints 在页面底部触发

jQuery Waypoints fire at bottom of page

jquery

jquery-waypoints

如果您有任何问题，我很乐意提供帮助..