Using the window resize function to keep variables uptodate?

Using the window resize function to keep variables uptodate?

I am a little confused on how to keep some variables Ive created uptodate
when the window is resized so my scroll function carries on getting the
correct values. Basically there are 2 variables whos values I need to keep
track off windowHeight and elementOffset but I'm really unsure on how to
update these in resize and then pass them to scroll?
My code looks like this
var windowHeight = $(window).height(),
headerHeight = $('.header').height(),
boxHeight = $('.box').height(),
elementOffset = $('.box').offset().top,
verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight /
2);
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop(),
distance = elementOffset - scrollTop;
if( distance <= verticalMatch ) {
$('.box').addClass('is-active');
}
});
$(window).on('resize', function() {
//update windowHeight
//update elementOffset
});
And heres the JS Fiddle: http://jsfiddle.net/vmU4f/3/
If someone could explain how I do this it would be great!