Изолируйте jQuery (.off) на один конкретный элемент при прокрутке. - PullRequest
Новая
       9

Изолируйте jQuery (.off) на один конкретный элемент при прокрутке.

0 голосов
/ 10 сентября 2018

Я работал с этим сценарием подсчета прокрутки, который анимировал некоторые числа, когда вы прокручивали вниз до определенного места на странице. Пока что все работает, как и ожидалось, но я заметил, что в скрипте, который убивает любые другие события прокрутки 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");, он уничтожит все события прокрутки на странице. В целом, я знаю почему делает то, что делает. Я просто не уверен, как получить его так, чтобы он разделялся между двумя событиями, чтобы я мог заставить анимацию прокручиваемого числа запускаться и останавливаться, а не мешать другому сценарию заголовка прокрутки.

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Метод jQuery off принимает функцию, уже прикрепленную с on, так что вы можете "отключить" только этот обратный вызов и не все.

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

Я не уверен, как вы можете ссылаться на функцию внутри себя, как обходной путь, я бы сделал что-то вроде ... 

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

var offReset = function(element) {
  $(element).off(reset)
}
0 голосов
/ 10 сентября 2018

Вы можете использовать события пространства имен, которые позволяют вам удалить это пространство имен только с помощью off() и оставить активными другие прослушиватели событий того же типа

попробуйте что-то вроде: 

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

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