css - 如何连续检查网页当前窗口高度？

我在网站上有导航栏，到达高度（y轴）的某个点后。我想操纵导航栏的CSS代码，例如背景色。

到目前为止到目前为止，我现在使用if语句检查高度，并且如果它超过了某个值，则操作navbar类的css。...但是我如何确保始终检查到该值，我已经使用了setInterval方法，但是im不知道这是否是一个好的解决方案...有人可以帮助我吗？

提前致谢！

function update() {
  if (currentHeight>600) {
    $(".class").css({"background-color":"blue"});
  } else {
    $(".class").css({"background-color":"transparent"});
  }
}

setInterval(update, 10);

最佳答案

您可以像这样使用jQuery：

$(window).resize(function () {
    if ($(window).height()>600) {
    $(".class").css({"background-color":"blue"});
    } else {
    $(".class").css({"background-color":"transparent"});
   }
});

您也可以使用CSS @media标签在不使用jquery的情况下执行此操作：

.class {
    background-color:blue;
}

@media screen and (max-height: 600px) {
  .class {
    background-color:transparent;
  }
}

关于css - 如何连续检查网页当前窗口高度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37921152/