Waypoints 新的 Sticky 快捷方式没有偏移参数？

Question

新的 Waypoint 文档指向 simple shortcut for initializing a "sticky" element 页面滚动。我的问题源于这样一个事实，即当需要偏移量时，新文档在文档上有点薄。

这段代码对我来说非常有用，所以我知道插件可以正常工作（它在 $().ready(function() 中）:

if($('.js-sticky').length > 0) {
    var sticky = new Waypoint.Sticky({
        element: $('.js-sticky')[0]
    });
}

这种较新的方法没有内置偏移选项，但 Waypoints 的完整非快捷方式版本有。它看起来像这样：

var waypoint = new Waypoint({
    element: $('.js-sticky'),
    handler: function(direction) {
        [do stuff]
    },
    offset: $(".head").outerHeight(true)
})

我的问题是我不知道在 [do stuff] 中做什么来复制 Waypoints 粘滞快捷方式已经做的事情，即添加 .stuck class，用与元素高度相同的占位符div包裹元素，然后在用户滚动回顶部时销毁占位符。

有人用最新版本的 Waypoints.js 做过吗？提前致谢。

Answer 1

从您链接到的粘性快捷方式页面：

When creating a new Sticky you can also pass along an options object. This options object can take all of the options of a normal Waypoint, as well as a few extras specific to the Sticky class.

您是否发现，如果您将 offset 作为选项传递给 Sticky 初始化程序，它没有任何效果？

Answer 2

有了上面的答案，这是我最终的工作代码，它比我最初概述的要多得多，但可能对其他使用此插件的人有所帮助。

注意事项：我正在使用一种方法通过 body::after 伪元素将值从 CSS 传递给 JS。关于 how/why，请参见 Jeremy Keith 的 post。我也在做一些计算以获得 CSS 粘性 header 的高度（如果存在的话）。

/*
 * "Watch" the body:after { content } to find out how wide the viewport is.
 * Thanks to http://adactio.com/journal/5429/ for details about this method
 */
function mqtag() {
    return window.getComputedStyle(document.body,':after').getPropertyValue('content');
}
var mq_tag = mqtag();

// If header is sticky, anchor links need an offset
if ( mq_tag.indexOf("stuck-header") !=-1 ) {
    // stickyoffset to account for
    //  -- header height
    //  -- secondary nav height
    //  -- padding-top for the .content section, which changes from 24px to 48px
    //      NOTE: We have to account for the .content padding-top in order to
    //            ensure that the secondary nav is stuck when the first waypoint
    //            article is scrolled to
    var contentPad = parseInt($('.content').css('padding-top'));
    var paddingOffset = (contentPad === 24 ? -30 : -5); 
    var stickyoffset = ($(".head").outerHeight(true) + $(".anchornav").outerHeight(true)) + paddingOffset;
} else {
    var stickyoffset = 0;
}

if($('.js-sticky').length > 0) { // Check that this class exists on the page
    var sticky = new Waypoint.Sticky({
        element: $('.js-sticky')[0],
        offset: $(".head").outerHeight(true)
    });

    // We want waypoints with different offsets depending on the scroll direction. 
    $('.js-waypoint-article').waypoint({
        handler: function(direction) {
            if (direction === 'down') {
                $('.anchornav--link').removeClass('anchornav--link__selected');
                $('#' + this.element.id + '_button').addClass('anchornav--link__selected');
            }
        },
        offset: stickyoffset + 1
    });

    $('.js-waypoint-article').waypoint({
        handler: function(direction) {
            if (direction === 'up') {
                $('.anchornav--link').removeClass('anchornav--link__selected');
                $('#' + this.element.id + '_button').addClass('anchornav--link__selected');
            }
        },
        offset: stickyoffset - 1
    });

    // Because the article that is last on the page never hits the top of the
    // viewport, we need to force the it into a selected state
    $('#post').waypoint({
      handler: function(direction) {
        $('.anchornav--link').removeClass('anchornav--link__selected');
        $('#' + this.element.id + '_button').addClass('anchornav--link__selected');
      },
      offset: function() {
        // Why 300? More or less arbitrary, adjust as needed
        return this.element.clientHeight + 300
      }
    });
}

Waypoints 新的 Sticky 快捷方式没有偏移参数？

Waypoints new Sticky shortcut has no offset parameter?

jquery

jquery-waypoints