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

变量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'};
});

应该是：

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

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

jQuery Waypoints在页面底部触发

1 个答案:

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