粘性导航的 ScrollMagic 响应持续时间/端点？

Question

我正在使用 Scroll Magic 进行粘性侧边导航。我希望侧导航在下一节之前停止，但截至目前，持续时间端点显示在我想要的位置下方约 200 像素。无论内容的高度如何，如何设置自定义端点？我尝试为持续时间点的高度添加一个负值，但在某些高度较小的页面上它不起作用并溢出到下一部分。我理想的结果是粘性导航总是在 .center-tab-content 部分底部之前大约 15px 处停止。

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

Answer 1

没有完整代码很难判断，但场景的持续时间应该是到该点的高度。

示例：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;
}

粘性导航的 ScrollMagic 响应持续时间/端点？

ScrollMagic responsive duration / endpoint for a sticky nav?

javascript

jquery

scrollmagic