How set up offset dynamically?

[Marenek]

I change offset dynamically to manage hiding header with Headroom 0.9.4. I have tried update to version 0.10.4 to use new freeze method. But offset setting doesn't work in this version. How can I set offset dynamically now?

[smelikmartin]

I have same issue . Any idea @WickyNilliams ?

[Marenek]

I have found solution for me: adding setOffset method to trackScroll.

function trackScroll(element, options, callback) {
  ...
  return {
      destroy: function() {
        cancelAnimationFrame(rafId);
        element.removeEventListener("scroll", handleScroll, eventOptions);
      },
      setOffset: function (newOffset) {
        options.offset = newOffset;
      }
    };
  }

Should I prepare a pull request?

[WickyNilliams]

I'd hold off on a PR for now @Marenek (appreciate the offer though!).

I have some ideas, but I'll have a proper think about how best to achieve this. Will keep you posted.

[saas786]

@WickyNilliams Any chance this could get implemented?

[jcackowskidiagram]

Still seems an issue. The method mentioned in #257 works in version 0.9.4 (2017), but not in the latest version. Having a way to update offset would be pretty useful if your header is more than just a simple design, like for responsiveness and any situation where the size of the header needs to change.

//old method worked up until Headroom 0.9.4
var hr = new Headroom(element);
hr.init();

window.addEventListener("resize", function(e) {
  hr.offset = getOffsetValue();
}, false);

[9585999]

Hot Fix no solution yet...

/* Common
--------------------------------------------- */
let normalizeUpDown = function( t ) {
    return ( Object( t ) === t ) ? t : { down: t, up: t };
};

let instance = new Headroom(
    document.querySelector( '.headroom' ),
    {
        // options...
    }
);

/* Use this if need to observe the
 * Window resize.
--------------------------------------------- */
instance.init = function() {
    this.offset = normalizeUpDown( this.elem.offsetHeight );

    window.addEventListener(
        'resize',
        () => {
            if ( ! this.initialised ) {
                return;
            }

            this.initialised = false;
            this.scrollTracker.destroy();
            this.init();
        },
        {
            once: true,
        }
    );

    return Headroom.prototype.init.apply( this, arguments );
};

instance.init();

/* Use this if need to observe the
 * Target resize.
--------------------------------------------- */
let observer = new ResizeObserver(
    function() {
        this.offset = normalizeUpDown( this.elem.offsetHeight );

        if ( ! this.initialised ) {
            if ( ! this.scrollTracker ) {
                this.init();
            }

            return;
        }

        this.initialised = false;
        this.scrollTracker.destroy();
        this.init();
    }
        .bind( instance )
);

observer.observe( instance.elem );