Путевые точки Новые липкие ярлыки не имеют параметра смещения?

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] повторить то, что Sticky ярлык Waypoints уже делает, что добавить .stuck класс, оберните элемент с заполнителем div той же высоты, что и элемент, а затем уничтожить местозаполнитель, когда пользователь прокручивается назад.

Кто-нибудь сделал это с помощью новейшей версии Waypoints.js? Спасибо заранее.

Answer 1

На странице Sticky Ярлык вы связаны с:

При создании нового Sticky вы можете также передать то объект опций. Этот объект параметров может принимать все параметры обычной путевой точки, а также несколько дополнительных функций, относящихся к классу Sticky.

Вы обнаружили, что если вы прошли offset в качестве опции в своем Sticky initializer, это не повлияло?

Answer 2

С ответом выше, это мой окончательный рабочий код, который делает совсем немного больше, чем я изначально излагал, но может быть полезен другим, работающим с этим плагином.

Замечания: Я использую метод передачи значений из CSS в JS через псевдоэлемент body::after. См. Сообщение Джереми Кейта о том, как/почему. Я также делаю некоторые вычисления, чтобы получить высоту липкого заголовка 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 
     } 
    }); 
}