White Space above the image

[destefanis]

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?

[damorossi]

did you solve this?

[destefanis]

No solution yet unfortunately. I also haven't had any time to troubleshoot this further, anyone else seeing this bug?

[alex100001]

Has anyone gotten anywhere with this? I'm having a similar issue, I have a page with two parallaxs happening. The first one works fine, but with the second one, the image stops scrolling up about 40px before it should, causing it to be jammed right up against the div below (see image). Resizing the window completely fixes it, but attempts to trigger a resize event with js don't seem to work

I did accidentally manage to fix it by creating a conflict between two different versions of jQuery - I have an extremely limited knowledge of js and jQuery, so I have no idea why this would be the case - but the problem is that for me at least, this breaks something else on the page that's far more important...

[shonnamartell]

I am having this same issue

[rogervila]

I have the same issue.
The demo page has the same issue too.

[digitalgopnik]

Think i'm having the same problem here. When i reload the page, sometimes it works without problems and the title will be displayed correct, sometimes not working correct.

WRONG

CORRECT

WRONG (height of the text div increased - see white space below grey div)

CORRECT

Solution?

[MelchnerRoman]

+1

[NatLuder]

I have this issue when using Bootstrap 3 nav-fixed-top navigation which "jumps out" of the site.
Maybe it has to do with the window height not being the same anymore because of this effect?
It ends up being the same as at @ratze90 's examples.

[MelchnerRoman]

@NatLuder i don´t use bootstrap and its happening to me too

[damorossi]

I solved it by adding to body: padding-top: 0px;
Don't know in your cases, but in mine it worked fine that way.

[NatLuder]

I solved it with adding additional padding of the size of the navigation bar on top of the element which comes after the nav bar (which changes to nav-fixed-top when scrolling past the keyvisual) with jQuery.

So something like:

1. Keyvisual min-height: 600px;
2. Nav bar height: 50px;
3. Content element 'content-element'

on $('#keyvisual').outherHeight() scroll reached I am adding a padding class $('#content-element').addClass('pt50')
This gives me the padding which is missing from the jumped out nav bar.

Hope this kinda helps at least some of you guys.

[elli0talders0nfsociety]

Agree, if i add padding-top: 0px on the body its fix for me.

[damorossi]

Glad to help

[GaryReckard]

The padding-top: 0px; doesn't work for me. So far, the only fix I can find is triggering a resize after things have loaded, like:

window.setTimeout(function(){
    $(window).resize();
},500);

[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!

[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.

[caseydev]

#perryM123
Thanks mate. It help for me too. I was also ruining on this since 2 days.

[VladLegkowski]

Hi guys, total, total noob here, but I think there is a way round it in case if you used parallax.style.backgroundPositionY in your function.

Add if / else to your function myFunction () in document.addEventListener("scroll", myFunction), and in your else statement set ...}else{parallax.style.backgroundPositionY= "0";}

So if you don't scroll or come back to the top of the page your background-position-y is set to 0.

See this solution published online By Abhishek Sachan

[damorossi]

Solved with padding 0 to body

---

From: Vlad notifications@github.com
Sent: Monday, November 7, 2016 1:37:07 PM
To: pixelcog/parallax.js
Cc: damorossi; Comment
Subject: Re: [pixelcog/parallax.js] White Space above the image (#128)

Hi guys, total, total noob here, but I think there is a way round it in case if you used parallax.style.backgroundPositionY in your function.

Add if / else to your function myFunction () in document.addEventListener("scroll", myFunction), and in your else statement set ...}else{parallax.style.backgroundPositionY= "0";}

So if you don't scroll or come back to the top of the page your background-position-y is set to 0.

See this solution published online By Abhishek Sachanhttps://www.devstreak.com/parallax-scrolling-effect-with-pure-javascript/

You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com//issues/128#issuecomment-258836950, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AIbYipytGzDi7iurbF7lHCgZBzx-gOD8ks5q7ymDgaJpZM4Hmyiv.

[ghost]

I am having this problem as well. I have two parallax elements on the same page. On both elements, the height is being calculated onLoad. The first element with the parallax works fine but on the second one, which is divided by another element that is at least 500px tall, the parallax image is being pushed down about 500px so there's a huge gap of whitespace.

I thought that the script that calculates the height of the elements was the problem so I removed it but the problem persisted. The weird part is that it corrects itself on window resize.

I tried the body{padding-top:0;} but that didn't help either. I am also using Bootstrap btw.

[raman15071991]

#perryM123
Thanks your scripts is work for me now but still i am not able to solve this my own.

thanks again

[serdargulum]

I have a simple solution : Just call parallax effect once, when your parallax element enters screen.

var parallax_tirggered = false;
$( window ).scroll(function() {
	if( !parallax_tirggered ){
		if($('.your_div').offset().top < $(window).scrollTop()+$(window).height()){ // Yur divs position
			parallax_effect();
			parallax_tirggered = true;
		}
	}
});

function parallax_effect(){
	$('.your_div').parallax();
});

[seanprashad]

I have a similar issue in which I have a thin white horiontal line above one of my parallax elements. No fix has worked for me as yet. However if I remove height: 100%; from the main parallax (with an Id of #Intro), the line is gone however I want the main parallax background to be 100% width and height of the screen.

Line doesn't show up for Chrome but on Firefox it does.

Anyone know what I should look at next? My website in question is here: http://seanprashad.me/

[eberhardloh]

we had the problem:
lazy-loaders trigger('resize.px.parallax') seemed not to be recognized (or too early?) by parallax.

thanks to serdargulum, i slightly modified it into this:

	var px_triggered = false;
	$(window).scroll(function () {
		if (!px_triggered) {
			if ($('.cestype-prllx').offset().top < $(window).scrollTop() + $(window).height()) {
				$(window).trigger('resize.px.parallax');
				px_triggered = true;
			}
		}
	});

[wstoettinger]

seems to be solved for most users.

summary:

• set body padding to 0
• add additional padding if you change your nav bar to fixed on scrolling
• create parallax (or trigger resize) after lazy loaders and or sliders/carousel are finished

[superason]

Hi, guys!

I found a new solution to this problem. If you use parallax.js, it will be really helpful. You are right, the problem is in the plugin itself. JS adds to elements with class .parallax-mirror a css property {overflow: hidden}. I don’t understand why it's needed there, but ok. When I removed it from my code, everything became fine!