Продолжительность отклика ScrollMagic / конечная точка для липкой навигации?

Я использую Scroll Magic для липкой боковой навигации. Я хотел бы, чтобы боковая навигация останавливалась прямо перед следующим разделом, но на данный момент конечная точка продолжительности показывает примерно на 200 пикселей ниже, чем я хотел бы. Как установить пользовательскую конечную точку независимо от высоты содержимого? Я попытался добавить отрицательное значение к высоте точки длительности, но затем на некоторых страницах, где высота была меньше, это не сработало и перетекло в следующий раздел. Мой идеальный результат — липкая навигация ВСЕГДА останавливается примерно за 15 пикселей до нижней части раздела .center-tab-content.

  if ($('.container--tab-navigation').length) {
      var pinPageNavController = new ScrollMagic.Controller(),
        pinPageScene = new ScrollMagic.Scene({
          triggerElement: '.l-side-nav',
          triggerHook: 'onLeave',
          duration: getHeightDuration,
        })
          .addIndicators({ name: '2 (duration: 0)' }) // add indicators (requires plugin)
          .addTo(pinPageNavController);

      pinPageScene.setPin('.l-side-nav', { pushFollowers: false });

      function getHeightDuration() {
        var heightDuration = Number($('.center-tab-content').height());
        return heightDuration;
      }
    }

javascript jquery scrollmagic
person hendy0817    schedule 04.03.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Трудно сказать без полного кода, но продолжительность сцены должна быть высотой до этой точки.

Пример: https://codepen.io/alexpetergill/pen/GRNBZKB

В приведенном выше примере мы хотим, чтобы липкая навигация остановилась в нижней части раздела 2, чтобы во втором разделе мы могли просто получить высоту раздела и умножить ее на 2 (при условии, что ваши разделы имеют одинаковую высоту!)

var scene = new ScrollMagic.Scene({
  triggerElement: '#nav',
  duration: $('section').outerHeight() * 2
})
  .setPin('#nav', {pushFollowers: false})
  .addTo(controller);

Также стоит отметить, что вы используете метод height() для своего расчета, который, по видимому, является более серьезной проблемой, поскольку он не будет вычислять, как вы думаете, например, если в разделе есть отступы. Рекомендуем использовать метод outerHeight(), чтобы обеспечить полную высоту этого элемента.

Обновленный ответ

Как уже говорилось, если ваши разделы имеют переменную высоту, я бы предложил рассчитать высоту всех предыдущих разделов и целевого раздела. (пример также обновлен!)

var scene = new ScrollMagic.Scene({
  triggerElement: '#nav',
  duration: getDuration()
})
  .setPin('#nav', {pushFollowers: false})
  .addTo(controller);

function getDuration() {
  var $section2 = $('.section-2')
  var $prevSections = $section2.prevAll('section')
  var outerHeight = 0;
  $prevSections.each(function() {
    outerHeight += $(this).outerHeight();
  });
  var duration = $section2.outerHeight() + outerHeight;
  return duration;
}
person Alex Gill    schedule 04.03.2021
comment
Вскоре я добавлю codepen. Да, я должен был упомянуть, что мои секции имеют переменную высоту. поэтому в некоторых разделах, где высота содержимого меньше, липкая навигация перетекает в следующий раздел. - person hendy0817; 04.03.2021
comment
Имеет смысл! Я обновил ответ и пример, чтобы учесть это. - person Alex Gill; 04.03.2021