通过jQuery.animate（）通过滚动控制动画

我想控制滚动条上元素的不透明度。当用户向下滚动页面时，不透明度缩小，当您向上滚动页面至顶部时，元素的不透明度应恢复正常。在阅读jQuery文档时，我认为这是可行的：

$(document).on("scroll", function() {
  console.log($(document).scrollTop());
  if ($(document).scrollTop() > 250) {
    $("#sportsImages").animate(
      {
        opacity: 0.25
      },
      2000
    );
  } else {
    if ($(document).scrollTop() < 250) {
      $("#sportsImages").animate(
        {
          opacity: 1
        },
        2000
      );
    }
  }
});

$（文档）.on（“滚动”，函数（）{
log（$（document.scrollTop（））；
如果（$（文档）.scrollTop（）>250）{
$（“#运动图像”）。设置动画(
{
不透明度：0.25
},
2000
);
}否则{
如果（$（文档）.scrollTop（）<250）{
$（“#运动图像”）。设置动画(
{
不透明度：1
},
2000
);
}
}
});

---

但不幸的是，这并没有像预期的那样起作用。即使我向上滚动页面，不透明度仍保持@.25。欢迎提出任何建议。提前感谢。

以下是我如何让它发挥作用的，让人们知道：

let pageScrolled = false;

$(document).scroll(function() {
  if ($(document).scrollTop() > 250) {
    if (pageScrolled === false) {
      pageScrolled = true;
      $("#sportsImages")
        .stop()
        .animate({ opacity: 0.25, width: "50%", margin: "0, 25%" }, 1200);
    }
  } else {
    if (pageScrolled === true) {
      pageScrolled = false;
      $("#sportsImages")
        .stop()
        .animate({ opacity: 1, width: "100%", margin: "0" }, 1200);
    }
  }
});