如何在屏幕调整大小时重新计算变量？

Question

我有两个变量来计算 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 tl = new TimelineMax({ paused: true })
.set(".card", {  }, sceneStart)
.to(".card", duration, { rotationY: 180 }, sceneStart)
.set(".card", {  })

// Only update on animation frames
window.addEventListener("scroll", function() {
    if (!requestId) {
        requestId = requestAnimationFrame(update);
    }
});

update();

// Set timeline time to scrollTop
function update() {
    tl.time(window.pageYOffset + triggerOffset);
    requestId = null;
}

我希望在调整窗口大小时调整卡片的位置。目前，需要刷新窗口才能重新计算。

Answer 1

您正在寻找 window.onresize

window.addEventListener("resize", function() {
  triggerOffset = document.documentElement.clientHeight / 2 + 44;
});