如何将偏移量实现为 jquery 航路点代码？

Question

我是 jQuery 的新手，还不太了解它，所以我可能不理解一些非常简单的东西。所以我为锚链接创建了一个粘性导航，当用户向下滚动页面时突出显示。为了创建它，我使用了 jquery waypoint.js 并且我目前正在使用它。我遇到的问题是我需要突出显示在其当前位置上方 50px 处触发，因此在 waypoint.js 中有一个偏移选项，但我无法使代码工作。如何实现 waypoint.js 的偏移量？

感谢您的帮助！

//这是我需要在下面的代码中实现的航点偏移代码——我如何在下面的代码中使用它？

var waypoint = new Waypoint({
  element: document.getElementById('number-offset'),
  handler: function(direction) {
  notify('25px from top')
  },
   offset: 25
})

// 这是在导航元素上创建高亮显示的代码

$(document).ready(function(){
    var waypoint0 = new Waypoint({
        element: document.getElementById('work'),
        handler: function() {

            $('a[href="#work"]').toggleClass('highlighted');
        }
    })
    var waypoint1 = new Waypoint({
        element: document.getElementById('about'),
        handler: function() {
            $('a[href="#work"]').toggleClass('highlighted');
            $('a[href="#about"]').toggleClass('highlighted');
        }
    })
    var waypoint2 = new Waypoint({
        element: document.getElementById('contact'),
        handler: function() {
            $('a[href="#about"]').toggleClass('highlighted');
            $('a[href="#contact"]').toggleClass('highlighted');
        }
    })   


  });

Answer 1

看来您只需要将 "offset" 属性添加到那些现有的航路点声明中即可。

当前：

  var waypoint0 = new Waypoint({
    element: document.getElementById('work'),
    handler: function() {

        $('a[href="#work"]').toggleClass('highlighted');
    }
  });

新：

  var waypoint0 = new Waypoint({
    element: document.getElementById('work'),
    handler: function() {

        $('a[href="#work"]').toggleClass('highlighted');
    },
    offset: 50
  });

来源：http://imakewebthings.com/waypoints/api/offset-option/

如何将偏移量实现为 jquery 航路点代码？

How to implement offset into jquery waypoint code?

html

css

jquery

jquery-waypoints