Question

我一直在使用这个向上滚动的脚本，当您向下滚动到页面上的特定位置时，该脚本会动画一些数字。到目前为止，一切都按预期工作，但是我注意到该脚本杀死了页面上其他所有内容的所有其他jQuery滚动事件。这是我所拥有的：

//count up script
  $(function () {
    var fx = function fx() {
      $(".stat-number").each(function (i, el) {
        var data = parseInt(this.dataset.n, 10);
        var props = {
          "from": {
            "count": 0
          },
          "to": {
            "count": data
          }
        };
        $(props.from).animate(props.to, {
          duration: 500 * 1,
          step: function (now, fx) {
            $(el).text(Math.ceil(now));
          },
          complete:function() {
            if (el.dataset.sym !== undefined) {
              el.textContent = el.textContent.concat(el.dataset.sym)
            }
          }
        });
      });
    };

    var reset = function reset() {
      console.log($(this).scrollTop())
      if ($(this).scrollTop() > 1300) {
        fx()
        $(this).off("scroll");
      }
    };

    $(window).on("scroll", reset);
  });

//Other scroll script
  $(window).scroll(function() {
    var sT = $(this).scrollTop();
    if (sT > 40) {
      $('.header').addClass('nav-bg');
    } else {
      $('.header').removeClass('nav-bg');
    }
  });

所以我不确定的棘手部分是如何使两个脚本相互独立执行。如果我在递增脚本中修改了$(this).off("scroll");，则每次滚动时动画都会不断触发。如果我留在$(this).off("scroll");中，它会破坏页面上的所有滚动事件。总体而言，我知道为什么这样做。我只是不确定如何获取它，以使其在两个事件之间分开，因此我可以使滚动数字动画触发和停止，而不会干扰其他滚动标题脚本。

Answer 1

您可以命名空间事件，使您仅可以使用off()删除该命名空间，并使其他相同类型的事件侦听器保持活动状态

尝试类似的东西：

var reset = function reset() {
  console.log($(this).scrollTop())
  if ($(this).scrollTop() > 1300) {
    fx()
    $(this).off("scroll.myScrollName");
  }
};

$(window).on("scroll.myScrollName", reset);

Answer 2

jQuery的off方法接受on已附加的功能，因此您只能“关闭”该回调，而不是全部。

http://api.jquery.com/off/

我不确定如何在自身内部引用该函数，作为一种解决方法，我会做类似的事情...

var reset = function() {
  //your_code...
  offReset(this);
}

var offReset = function(element) {
  $(element).off(reset)
}

将jQuery（.off）隔离到滚动上的一个特定元素

2 个答案: