Problem when used on the same page as JS accordion

[hbgreg]

Hi,

I have an accordion that opens and closes divs on click. When they are all open, the rellax content in a lower section gets pushed out of its wrapper in overlaps other content.

[ncoetzer]

@hbgreg Perhaps you found a solution already, but I had the same issue and solved it by using the ResizeObserver API to listen to any resizing on the body element and call the refresh() method to keep things in place. Something like this:

// Initialize Rellax
const rellax = new Rellax('.js-rellax', { center: true });
rellax.refresh();

// Let's listen for any resize events on the body element,
// such as expanding accordions and refresh the rellax to keep
// the centering in place and avoid any overlapping with content
const bodyObserver = new ResizeObserver((entries) => {
    entries.forEach(() => {
	rellax.refresh();
    });
});

Hope this helps 😊