Эквивалент $ (window) и другие Jquery для Vannilla JS не работают

Question

У меня есть этот кусок кода;

class toTop {
  constructor(topButton) {
    this.topButton = topButton;
    this.topButton = $('#to_top');

    if (this.topButton.length > 0) {
      $(window).on('scroll', () => {
        return this.toggle($(window));
      });

      this.topButton.on('click', function(e) {
        e.preventDefault();
        return window.scrollTo(0, 0);
      });
    }
  }

  toggle(trgt) {
    if (trgt.scrollTop() > 250) {
      return this.topButton.fadeIn();
    }
    return this.topButton.fadeOut();
  }

  render(trgt) {
    return trgt.append(this.topButton);
  }
}

Я хотел бы знать следующее:

1. Что такое Pure Javascript только для return this.toggle($(window)). Я пытался использовать это;

   window.addEventListener('scroll', function() { return this.toggle($(window)); });

, но не работает.

Также эта часть;

toggle(trgt) {
    if (trgt.scrollTop() > 200) {
      return this.topButton.fadeIn();
    }
    return this.topButton.fadeOut();
  }

  render(trgt) {
    return trgt.append(this.topButton);
  }

Я пытался конвертировать в ES6, но безуспешно. Если кто-то может помочь, было бы здорово.

Answer 1

Проблема с этой строкой кода, которую вы пробовали:

window.addEventListener('scroll', function() { return this.toggle($(window)); });

, заключается в том, что вы забыли, что область действия this меняется. Если бы вы использовали функцию стрелки, как вы делали с примером jQuery, вы бы уже решили эту проблему.

window.addEventListener('scroll', () => { return this.toggle($(window)); });

Это также можно немного сократить, удалив фигурные скобки и return

window.addEventListener('scroll', () => this.toggle($(window)));

Но тогда у вас все еще есть проблема, заключающаяся в том, что $(window) и $('#to_top') не являются нативными для JavaScript, а вместо этого являются jQuery.

Ближайший натив для $(window) будетdocument.body и ближайший к $('#to_top') будет document.getElementById('to_top'), но это сломает fadeIn и fadeOut, потому что это не нативный JavaScript и часть jQuery.