Uncaught TypeError: Cannot read property 'destroy' of undefined about headroom.js HOT 8 OPEN

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();

from headroom.js.

Up!

from headroom.js.

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.

from headroom.js.

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?

from headroom.js.

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.

from headroom.js.

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.

from headroom.js.

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.

from headroom.js.

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();
      }
    };
  }, []);

from headroom.js.