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