Inicjowanie obiektu podczas podczas scrollowania

0

Witam. Próbuję zrobić prostą animację polegającą na pojawianiu się obiektów DOM dla określonej wysokości scroll.


function singleElement(config) {
  
    if( !(this instanceof singleElement) ) {
        return new singleElement(config);
    }
    if($(config.className).length) {
      return c('juz jest');
    }
  
    this._config = this._extendOptions(config);
    this._obj = this._setAttributes(config);
    this._status = "hidden";
    
    this._init = function(start, stop) {
      // c('zakres od' + start + " do " + stop);
      // c('zakres scrollTop =' + win.scrollTop());
      if(win.scrollTop() > start && win.scrollTop() < stop){
        if(this._obj.style.opacity == 0 && this._status == "hidden") {
          this._status = "visable";
          this._addToDOM(this._obj);
          this._showElement("." + this._obj.className, this._obj.offsetX, this._obj.offsetY, this._obj.time);
        }
      } else if(this._status == "visable"){
        this._status = "hidden";
        this._removeElement();
      }
    }
}

(...)

win.on('scroll', function() {    
   new singleElement({
      className: 'boxChild1',
      height: '110px',
      width: '110px',
      top: '44%',
      left: '47%',
      bg: 'green',
      animation: {
         offsetX: 300,
         offsetY: 200,
         time: 100                                                                                         
      }
   })._init(1000, 1800);
})

tutaj fragment samego inicjowania, całość jest dość obszerna i jest tutaj https://codepen.io/bastej/pen/PaeBjR

Tworzę tutaj za pomocą konstruktora singleElement nową instancję(dodaje do DOM) jeżeli scroll będzie większy od 1000. Chciałbym żeby obiekt stworzył się tylko raz - żeby funkcja _init mogła wykonać się raz do pÓÓÓÓki box jest widoczny, a po zniknięciu znów mogła się wykonać. W tej chwili obiekt tworzy się za każdym razem kiedy window.scroll jest w podanym przedziale.

Dzięki za każdą wskazówkę

Ps. jeżeli to problem że linkuje do zewnętrznego serwisu przekleje kod tutaj ;)

1

najprosciej to chyba tak?

if ($('.jakisselektor').length == 0) [}

tutaj masz w jquery bo nie wiem jak to tam w babelu wyglada

0

dzięki, pomogło ;)

1 użytkowników online, w tym zalogowanych: 0, gości: 1