Как мне реализовать эти 2 путевые точки - бесконечную живую прокрутку и липкий заголовок?

Question

Я использую 2 путевые точки для реализации

1. a sticky header (http://imakewebthings.com/jquery-waypoints/sticky-elements/)
2. An infinite live scroll (http://imakewebthings.com/jquery-waypoints/infinite-scroll/)

Заголовок работает. Но как только активируется прокрутка в реальном времени, липкий заголовок возвращается в исходное положение, и кнопка «Верх» внизу также исчезает. Хотя живая прокрутка продолжает работать.

Я попытался снова вызвать функцию stickyHeader, когда начинается живая прокрутка. Но это не помогает. Моя функция stickyHeader выглядит следующим образом:

var stickyHeader = function() {

  $('.top').addClass('hidden');
  $('body').waypoint(function(event, direction) {
      $('.top').toggleClass('hidden', direction === "up");
  }, {
      offset: '-100%'
  }).find('#stickyHeaderText').waypoint(function(event, direction) {
      $(this).parent().toggleClass('sticky', direction === "down");
      event.stopPropagation();
  });

};

Обновление: Бесконечный свиток

        var opts = {
            offset: '100%'
        };

        var $footer = $('#footerDivId');
        $footer.waypoint(function(event, direction) {
            $footer.waypoint('remove');
            ftr.remove();
                    // get more data
            $footer.waypoint(opts);
        }, opts);

        stickyHeader();