Using "sticky"element offsets parallax container

[moseleyi]

I use a wrapper with logo and navigation as a position:sticky element but I change its size when somebody scrolls past 100px to take up less space.

Unfortunately both versions of the script make the parallax-mirror to shift.

Here is the image:

Basically onload it's aligned with the brown container. But once I start scrolling it also moves down by the difference of height of the sticky element..

[wirion]

I have the exact same issue. I tried without success 2 different ways to get the images to anchor to a deeper element that does not change size

• changing the parallax-mirror attachment via data-mirror-selector to the deeper element
• setting the transform property on the deeper element to something different from none so that the position: fixed images would anchor to it, according to MDN

[carlitoselmago]

I found a dirty quick way to overcome this issue:

Since the positions get updated on window->resize event you could just trigger a fake resize event. If using jquery it's as easy as calling $(window).resize(); along the event that changes you DOM element to position:fixed;

[levmyshkin]

$(window).resize(); can be too much, because it will stop your scroll. You can trigger parallax.js event to calculate offset again, when you sticky menu is not fixed anymore: $(window).trigger('resize.px.parallax');