使用窗口调整大小功能使变量保持最新？

Question

我有点困惑如何在调整窗口大小时使我创建的一些变量保持最新，以便我的滚动函数继续获取正确的值。基本上，我有多个元素，其中包含一条消息，当用户将元素滚动到视口高度的 50% 高度时，就会显示该消息。这工作正常，但我的问题是当我调整大小时我不确定如何更新我的变量boxHeight, elementOffset, verticalMatch，它可以控制我需要在滚动事件中使用的值。我想知道有人可以帮助解释我如何解决这个问题吗？

我的代码是这样的

 var windowHeight = $(window).height(),
    headerHeight = $('.header').height();

$('.box').each(function (i,e) { 

    var el = $(e);

    var boxHeight = el.height(),
        elementOffset = el.offset().top,
        verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight / 2);

    $(window).on('scroll', function () {
        var scrollTop = $(window).scrollTop(),
            distance = elementOffset - scrollTop;

        if( distance <= verticalMatch ) {
           el.addClass('is-active');
        }       

    });
});


$(window).on('resize', function() {
    windowHeight = $(window).height()
    elementOffset = $('.box').offset().top;

    $('.box').each(function (i,e) { 

        var el = $(e);

        //update boxHeight, elementOffset, verticalMatch
        verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight / 2);
    });
});

这是 JS Fiddle：http://jsfiddle.net/fm4z7/2/

如果有人能解释我是如何做到这一点的，那就太好了！

Answer 1

如果您只想在调整大小事件期间更新您的大小变量，那么就这样做：

$(window).on('resize', function() {
    windowHeight = $(window).height();
    elementOffset = $('.box').offset().top;
});

您的变量是全局变量，因此可以在任何地方访问它们。