JQuery仅检测初始高度

Question

我已经构建了一个带有大背景图片的主页模板。以下JQuery检测视口高度，并将带有内联CSS的min-height应用于.background类。

// Set viewport height on .background - https://j.eremy.net/set-element-height-to-viewport/
function setHeight() {
    windowHeight = $(window).innerHeight();
    $('.background').css('min-height', windowHeight);
};
setHeight();
    $(window).resize(function() {
    setHeight();
});

这就像一个魅力。但是，我的智能手机有问题。当我展开移动导航时，下面的标题不会向下移动。这是因为JQuery只检测页面加载时的高度。

有没有办法让JQuery动态化，以便检测出像扩展导航一样的变化？

Answer 1

每当您想要更新背景高度时，只需使用$(window).trigger('resize')。

初始代码：

$(window).on('resize', function (){

    $('.background').css('min-height', $(window).innerHeight());
});

$(document).ready(function (){

    $(window).trigger('resize');
});