White Space above the image

I’ve read a few similar bugs that have been marked close, but no matter what I do, there’s always a gap above my image, likely from the math of the layout being off.

I’ve attempted to use $(window).trigger("resize").trigger("scroll"); and $(window).trigger('resize.px.parallax'); using on Load callbacks for the .parallax-slider class and with other events to no success.

The gap corrects itself on page resize, but only then is it correct. Any ideas?

[PerryM123]

I was having this issue as well.

In my case, I’m using bootstrap with parallax. Just like all of the above posters, I was running into the space issues after the user resizes the screen from 400px to 1200px or the other way around, which resulted in whitespace.

I believe (to my understanding), after resizing the window, parallax.js is calculating where everything is. Next bootstrap, rearranges everything which causes some whitespace.

My fix for this was: -after the user resizes, wait a tiny bit of time to let bootstrap rearrange everything and then run resize() with jQuery to have parallax recalculate everything.

Hopefully this helps

var timer; $(window).bind('resize', function() { clearTimeout(timer); timer = setTimeout(function(){ $(window).resize(); }, 250); });

EDIT: Sorry about the poor format. First time posting on this forum.

Also, thanks for making such a great plugin.

[GaryReckard]

I actually found the source of my problem. I am also using a full width, responsive slider called LayerSlider, which is above my parallax sections. This slider area adjusts it’s height as it loads, which was causing that gap at the top of my parallax element. To fix this, I waited to call parallax() until LayerSlider loaded completely, using the cbInit callback in LayerSlider. Hope this helps someone!