小编N. *_*son的帖子

我有TweenLite将startTrigger设置为x像素,具体取决于matchMedia大小.我希望这个matchMedia在浏览器调整大小时触发,所以我添加了一个事件监听器.它没有运行,因为我必须重新加载页面才能触发matchMedia.

我已经尝试将matchMedia代码插入到我的resize事件监听器中,该监听器也处理我的元素的顶部位置.

var triggerOffset2 = document.documentElement.clientHeight / 2 + 44;
var cardHeight2 = $('#card2').outerHeight(true) / 2 + 22;
var duration2 = 1000;
var requestId2 = null;  


window.addEventListener("resize", function() { 

var sceneStart2;
  if (window.matchMedia("(min-width: 1024px)").matches) {
    sceneStart2 = 5000
  } else {
    sceneStart2 = 7000
  }
  console.log(sceneStart2);

    triggerOffset2 =  document.documentElement.clientHeight / 2 +  44;

    TweenLite.set(".contain2", {
        top: triggerOffset2 - cardHeight2

    });

    TweenLite.set(".timeline-trigger", {
        top: triggerOffset2
    });
});

var sceneStart2;
  if (window.matchMedia("(min-width: 1024px)").matches) {
    sceneStart2 = 5000
  } else {
    sceneStart2 = …

我有两个变量来计算 clientHeight，除以 2 并加 44。它当前按预期工作，除非调整窗口大小，需要刷新页面才能重新计算 clientHeight。一旦刷新，它就会正确地重新定位 div。如何在调整窗口大小时重新计算每个窗口的 clientHeight ，以便不需要刷新页面即可再次运行脚本并获取新的高度？

这是基于滚动位置的动画的一部分。当您向下滚动页面时，div 会产生动画。

var triggerOffset = document.documentElement.clientHeight / 2 + 44;
var cardHeight = $('#card').outerHeight(true) / 2 + 22;
var duration = 1000;
var requestId = null;

var sceneStart;
if (window.matchMedia("(max-width: 1080px)").matches) {
    sceneStart = 4000
} else {
    sceneStart = 4000
}
console.log(sceneStart); 

TweenLite.set(".contain", {
    top: triggerOffset - cardHeight
});

TweenLite.set(".timeline-trigger", {
    top: triggerOffset
});

TweenLite.set(".start-trigger", {
    top: sceneStart
});

TweenLite.set(".end-trigger", {
    top: sceneStart + duration
});

// SCROLL MAGIC!!!
var …