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

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

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

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

有没有人用最新版本的Waypoints.js做到这一点？提前谢谢。

Answer 1

从您链接的Sticky Shortcut页面：

创建新的Sticky时，您还可以传递选项对象。此选项对象可以采用普通Waypoint的所有选项，以及Sticky类特有的一些附加功能。

您是否发现如果您在Sticky初始化程序中作为选项通过offset它没有效果？

Answer 2

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

注意事项：我正在使用一种方法通过body::after伪元素将值从CSS传递给JS。请参阅Jeremy Keith的帖子了解如何/为何。我也在做一些计算，以获得CSS粘性标题的高度（如果存在）。

/*
 * "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 new Sticky快捷方式没有偏移参数？

2 个答案: