我正在使用 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;
}
}
最佳答案
如果没有完整的代码,很难判断,但场景的持续时间应该是到该点的高度。
示例: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;
}
关于javascript - ScrollMagic 响应持续时间/粘性导航的端点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66476867/