Problem with blank screen at bottom of parallax webpage

Hi there - I’m new here, please forgive me if I’ve posted this in the wrong place!

I am definitely a CSS amateur and I’ve been making a portfolio site over the past week using a parallax setup given to me by a friend. So far I haven’t had many problems, but I’ve found that the final section at the bottom of my page (“Contact details”) has a glitch of some sort.

Basically when you try to scroll down from the “Contact details” section, the screen goes blank. I suspect that this is something to do with a height property in my CSS file but I cannot find it! There were previously some extra sections with Lorem ipsum filler text below the “Contact details” section, which I deleted - but I think in doing so they have somehow retained their height at the bottom of the page.

Hope that makes some sense. The whole lot is (temporarily) freely hosted at: - sorry for the advert at the start.
I’ve also zipped it and put it on Google Drive if that helps:

Any help hugely appreciated, even if just some pointers.
Thank you so much in advance!


The height of the page is controlled by the inline height that the JS is writing into this element:

<!-- this is to make the page's vertical scrollbar appear the correct height -->
	<div style="height: [B]6423.13px;[/B]" id="mock-scroller"></div>

That height is wrong and doesn’t match your content height. This would suggest that this is a JS problem or that you removed something that the JS is taking into account.

I’ll move this thread to the JS forum as I can’t see anything easily obvious and hopefully one of the JS experts will cast their eye over this and see if they can spot anything.

Hi Paul,

Thanks so much for your reply, I posted in 7 forums and you are the only one who got back to me. I really appreciate the help.
I’ve found a temporary workaround by adding more content to the site so that it makes back that extra height which seemed to be causing the problem. It’s a bit backwards, so if the JS people do find a solution that would be great, but it’s not the end of the world if not.

Thanks again for taking time out of your day to help me. Have a great week!

Hopefully @Pullo or one of the other JS experts will have a chance to have a look and see if they can pinpoint the cause :slight_smile:


My first guess would be similar to that of Paul - namely that you have removed something that the JS is relying on.

The value that is causing a problem is being calculated here (line 263 in parallax.js):

iPageHeight = Math.max( iPageHeight, ++$sections.last().data().iBottom );
$scroller.css( 'height', ( iMaxHeight = iPageHeight ) + iWindowHeight );

Could you upload the original setup that your friend gave you (to Google Drive), so that we can compare the versions and see if there are any discrepancies.