javascript - 如何使用 jquery 添加或删除基于浏览器高度调整大小的类？

Question

我想知道是否有一种方法可以根据浏览器的高度添加或删除类。现在，我正在将一个 div 与浏览器高度进行比较，如果浏览器的高度高于 div 高度，我将向其添加一个类:

if (($(window).height()) > $(".sidebar").height()) {
    $("#widget-area").addClass("fixed");
} else {

}

这是有效的，因为在满足条件时正在添加类。问题是，如果用户调整浏览器的高度，即使不再满足条件，添加的类也会继续添加。

有没有办法监听浏览器的高度并添加或删除此类，无论以后浏览器是否调整大小？

编辑:

我知道你们中的很多人可能会建议通过媒体查询来完成此操作，但我需要使用 jQuery 来完成此操作。

我已经按照建议添加了调整大小窗口功能。问题是脚本只会在调整浏览器大小时运行。我需要它在文档准备好后立即运行，并且如果浏览器也已调整大小。这是我的代码:

$(window).on('resize', function(){
    if (($(window).height()) > $(".sidebar").height()) {
        $("#widget-area").addClass("fixed");
    } else {

    }
});

Answer 1

CSS media queries是完成这项工作的好方法。但是如果你想使用 jQuery，你应该在窗口调整大小时运行代码。

$(window).resize(function(){
  if ($(window).height() > $(".sidebar").height())
    $("#widget-area").addClass("fixed");
  else
    $("#widget-area").removeClass("fixed");
});

此外，如果您想在页面加载时运行代码，请使用 .on() 并向其添加两个事件处理程序。

$(window).on('load resize', function(){
  if ($(window).height() > $(".sidebar").height())
    $("#widget-area").addClass("fixed");
  else
    $("#widget-area").removeClass("fixed");
});

请参阅 demo 中的代码结果