代码之家 › 专栏 › 技术社区 › ultraloveninja

将jquery的(.off)隔离到滚动上的一个特定元素

scroll html jquery javascript

ultraloveninja · 技术社区 · 6 年前

我一直在使用这个滚动计数脚本,当你向下滚动到页面上的某个特定位置时,它会为一些数字设置动画。到目前为止,一切都按预期工作,但我注意到在脚本中,终止了页面上其他所有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(“滚动”); 它会触发页面上的所有滚动事件。总的来说,我知道 为什么 它在做它在做的事情。我只是不知道如何得到它,以便它在两个事件之间分开,这样我可以得到滚动数字动画来触发和停止,而不干扰其他滚动头脚本。

2 回复 | 直到 6 年前

charlietfl 6 年前

可以使用命名空间事件来移除该命名空间 off() 并保持同一类型的其他事件侦听器处于活动状态

尝试以下方法:

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

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

arieljuod 6 年前

jQuery off 方法接受已附加的函数 on 所以你只能“关闭”那个回调,而不是全部。

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

我不知道你如何引用函数本身,作为一个解决方法,我会做一些类似…

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

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