JavaScript：仅在CSS样式发生更改时才对窗口大小调整执行操作

Question

我有以下代码：

$(window).resize(function(){
  if ($(".gallery-container").css("position") === "fixed" ){
    $(".pd-text").removeAttr("style");
  };
});

我想仅在窗口调整大小时.gallery-container从position: relative转到position: fixed（当屏幕大小为min-width时才执行操作650像素）。

有办法做到这一点吗？

Answer 1

由于您的实际情况是MediaQuery min-width: 650px，请使用MediaQuery API：

var query = matchMedia('(min-width: 650px)');
query.onchange = updateState; // will trigger when the query status change
updateState();

function updateState(){
  state.textContent = 'background is ' + (query.matches ? 'green' : 'red');
}

.rect{
  height: 250px;
  width: 250px;
  background-color: red;
}
@media (min-width: 650px) {
  .rect {
    background: green;
  }
}

<h3>Run the snippet in 'full page' and resize your window</h3>
<pre id="state"></pre>
<div class="rect"></div>