Javascript 在不同的窗口高度上滚动魔法偏移

我正在使用ScrollMagic在scroll上获得一些动画。问题是我需要使用偏移，以便动画在滚动的某个点触发，但它完全取决于窗口高度

在我提供的示例中

https://jsfiddle.net/5tvrnfkx/12/

你可以在卷轴上看到这个盒子

请注意窗口高度，请尝试调整高度或预览面板的大小，然后运行

因此，在

426px

窗口高度中，它可以完美地工作。在没有框的情况下启动页面并在滚动中设置动画

尝试增加高度并选中，该框将显示在开始处。类似地，如果降低高度，则仅在滚动几下后才会显示该框

---

因此，我想知道是否有任何方法可以使偏移值动态，以便在任何窗口高度，动画都从页面滚动的同一点开始。

是的，您可以使用

triggerHook

将其设置为

0

（或非常接近它）

像这样：

jQuery(function() {

  var controller = new ScrollMagic.Controller();

    var tween = TweenMax.to("#boxAnim", 1, {className: "+=animate"});
    var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300, triggerHook: 0})
            .setTween(tween)
            .addTo(controller);


  var height = $(window).outerHeight();

  $('.height').append(height);
});

---

这很有效，谢谢你。你能简单地解释一下这是如何工作的吗？使用

offset

和

triggerhook

有什么区别？当然。简而言之，

offset

是基于像素的，而

triggerHook

是相对的-数字0到1。它们使用

triggerement

作为参考。通常，您可能更喜欢使用

triggerHook

而不是

offset

。如果你想知道更多的话，我发现了这个：（可能比我解释得好得多）。你知道有没有什么方法可以在更宽的屏幕上禁用它？我尝试了类似这样的东西

$（window）.on（'resize'，function（）{var winWidth=$（window.width（）；if（winWidth>=1680）{scene.destroy（）；}else{scene.refresh（）；}）.resize（）下面的代码，但它不会工作。是的，但我们需要一些更多的更改。看一看：。快速解释：var
scene
现在是全局声明的。创建了函数initScrollMagic（）

。然后，当调整大小时，如果

winWidth>=1680

&场景未定义，它将破坏

场景

（

true

重置

tween

），并将场景设置为

未定义

。相反，如果

winWidth<1680

和

scene

未定义，它将调用

initScrollMagic

再次创建它。这很有帮助，但现在我准确地找到了问题所在。这是当我们有更多的1个元素动画。就像实时一样，我有很多动画要处理，这就是我使用它的方式，所以发生的是，它在页面刷新时效果很好，但在调整页面跳转的大小时效果很好。我应该使用

$（每个）

语句吗？