使用窗口resizefunction来保持变量的最新状态？

我有点困惑如何在调整窗口大小时保持我创建的一些变量，因此我的滚动function继续获取正确的值。 基本上我有多个元素包含当用户将元素滚动到视口高度的50％高度时显示的消息。 这工作正常，但我的问题是当我resize时我不知道如何更新我的变量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); }); }); 

inheritance人JS小提琴： http ： //jsfiddle.net/fm4z7/2/

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

Answer 1

如果您只想在resize事件期间更新resize变量，那么请执行以下操作：

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

您的变量是全局的，因此可以随处访问它们。