javascript - $(window).scroll事件触发不一致

制作一个在滚动后会重新调整大小的标题，当向下滚动时我可以使用，而当我一直滚动到顶部并尝试使标题再次变大时失败。有时它会调整大小，有时却不会；而且永远不会瞬间。

这是代码：

$(window).scroll(function () {
if ($(document).scrollTop() >= 50) {
    $('.header').animate({
        'padding': 0
    }, 300);
} else {
    $('.header').animate({
        'padding-top': 15,
        'padding-right': 7,
        'padding-bottom': 15,
        'padding-left': 25
    }, 300);
}});

提前致谢

最佳答案

您需要为此设置一个标志，该标志检查是否已完成相同的操作。以下代码中可能会有故障，但需要在正确的环境中进行调整。如果需要，将第一行更改为true。

var flag = false;
$(window).scroll(function () {
  if ($(document).scrollTop() >= 50) {
    if (flag) {
      $('.header').animate({
        'padding': 0
      }, 300);
      flag = false;
    }
  } else {
    if (!flag) {
      $('.header').animate({
        'padding-top': 15,
        'padding-right': 7,
        'padding-bottom': 15,
        'padding-left': 25
      }, 300);
      flag = true;
    }
  }
});

在此设置此flag将确保该函数在其范围内仅执行一次。

关于javascript - $(window).scroll事件触发不一致，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34981513/