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小提琴：http://jsfiddle.net/fm4z7/2/

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

Answer 1

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

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

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

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

1 个答案: