Jquery - 如何检测浏览器高度的变化而无需刷新浏览器？

Question

我正在使用的代码

var height = $(window).height(); 

if (height>=768) {
  //change class for example.
}
else {
  //change class back.
}

上面的代码可以很好地检测视口高度并按应有的方式应用类更改，但是如果我调整浏览器窗口的大小，我还希望此脚本能够检测何时发生这种情况并基本上重新运行该函数更新的高度值。怎么样？

我尝试了以下在 StackOverflow 上找到的解决方案。我能够成功地实现它们，但是，我仍然必须刷新站点才能使函数应用类更改。它没有在浏览器调整大小时这样做。

这是一个：

  var width = $(window).width();

  $(window).resize(function(){
    if($(this).width() != width){
      width = $(this).width();
      console.log(width);
    }
  });

这是我尝试过的另一个解决方案，仍然是同样的问题。我必须在新的视口设置中刷新浏览器才能识别差异。

var height = $(window).height();

window.addEventListener('resize', setWindowSize);

function setWindowSize() {
  if($(this).height() != height){
  height = $(this).height();
  console.log(height);
  }
}

if (height <= 859  ) {
  $(".stats-events-2").removeClass("show-set").addClass("hide-set");
}
else {
  $(".stats-events-2").removeClass("hide-set").addClass("show-set");
}

所以我正在尝试做的是检测视口中的每次更改，每次更改时在脚本中设置它，因此如果视图高度低于某个点，则分配某个类，反之亦然。任何帮助非常感谢。

Answer 1

var height = $(window).height();

window.addEventListener('resize', setWindowSize);

function setWindowSize() {
    if($(this).height() != height){
        height = $(this).height();
        console.log(height);
    }
}

if (height <= 859  ) {
    $(".stats-events-2").removeClass("show-set").addClass("hide-set");
} else {
    $(".stats-events-2").removeClass("hide-set").addClass("show-set");
}

正如我在 cmets 中提到的，如果您所做的只是一些样式更改，那么您尝试做的事情可能会通过媒体查询来完成。除此之外，上面的逻辑只是在窗口更改时设置高度。类更改逻辑不在处理程序中，因此未对其进行评估。它需要在您的处理程序中。

var $window = $(window);
var $statsEvents2 = $(".stats-events-2");

$window.on('resize', function() {
    if ($window.height() <= 859) {
        $statsEvents2.removeClass("show-set").addClass("hide-set");
    } else {
        $statsEvents2.removeClass("hide-set").addClass("show-set");
    }
});