Uncaught TypeError: Cannot read property 'destroy' of undefined

[Konark-Web]

Good day. I use your library for the Elementor and I need to change offtop by controls. So I use headroom( 'destroy' ), and after I initialization with new options. If I quickly change the value I have error:

Uncaught TypeError: Cannot read property 'destroy' of undefined

https://monosnap.com/file/frAhbSGl7HV8adOGDYaiN77TOCbADi

[WickyNilliams]

Hmm... I would not use the jquery plugin if you can avoid it - it's not been updated in a long time and i will eventually deprecate/delete it completely. Try the vanilla JS version, and see if that fixes.

[Konark-Web]

I used

Hmm... I would not use the jquery plugin if you can avoid it - it's not been updated in a long time and i will eventually deprecate/delete it completely. Try the vanilla JS version, and see if that fixes.

I used vanilla js and have same problem. Look, I use simple code from your example, if and outpute in console object.

var headroom = new Headroom( this.$element.get( 0 ), options );

console.log(headroom);

headroom.init();

console.log(headroom);

// setTimeout(() => { headroom.destroy(); }, 5000);
headroom.destroy();

console.log(headroom);

If I dont use setTimeout, I have error:

headroom.min.js?ver=0.11.0:7 Uncaught TypeError: Cannot read property 'destroy' of undefined
If I use with timeout, its ok.

[Konark-Web]

Up!

[skosito]

Hey @WickyNilliams, i have the same issue, the reason is scrollTracker is initialized inside setTimeout, and destroy can be called before that. It seems you had this same issue before and you fixed it, but now it is reintroduced again.
I am referring to this: #338
Could you please take a look? Thanks!
EDIT: It seems like there is a fix ready for this kind of situation here :) #339
Maybe you can merge this, it would be really helpful.

[signalpoint]

I am also experiencing this issue and agree with the assessment from @skosito . Here's a cheap workaround that I use just before calling destroy():

if (!myHeadroom.scrollTracker) {
  myHeadroom.scrollTracker = {
    destroy: function() {}
  };
}
myHeadroom.destroy();

[nasirkhan]

faced the same issue. I wanted to disable Headroom on some specific pages and getting error while tried to use the destroy. Can you suggest any solution to disable it by checking some conditions?

[manoldonev]

Facing the same issue while integrating the vanilla JS version in a React app -- race condition triggered while running the React Testing Library / Jest tests.

[puredazzle]

For me it worked if I used the function on the child ref, scrollTracker, like this in React:

useEffect(() => {
    const headroom = new Headroom(headroomRef.current, {
      classes: {
        // when element is initialised
        initial: 'transition-transform ease-linear',
        // when scrolling down
        unpinned: '-translate-y-full',
      },
    });

    headroom.init();

    return () => {
      if (headroom && headroom.scrollTracker) {
        headroom.scrollTracker.destroy();
      }
    };
  }, []);