Pfthb

I have ran into a crazy issue: my parallax effect is going bonkers.

When I don't have the background-repeat on I get a white space of about 200px above the image, if the background-repeat is on, my image is repeated in that space above.

I don't know how else to explain this.

When I refresh the page, the image is in its appropriate place, but as soon as there is a scroll event, the image bounces down and has that extra space on top.

I've tried various things with both the CSS and the JQuery to no avail. I sure hope one of you experts have an answer to this mess.

I have a Codepen at https://codepen.io/eghoff/pen/MzbLBo but it won't show the refresh as I've explained it.

For that you can go here: https://agilewebsitedesigns.co.uk/indexHome.html

Thanks for any and all help.

$(window).scroll(function() 

 parallax();

);

function parallax() 

 var wScroll = $(window).scrollTop();

 $('.parallax--bg').css('background-position', 'center ' + (wScroll * 0.250) + 'px');

 $('.parallax--box').css('top', -5 + (wScroll * 0.0125) + 'em');

.sliderContainer 
 background-color: white;
 background-image: url("../images/001-homepage-images/slider.jpg");
 height: 800px;
 background-position: center;
 background-size: cover;
 width: 80%;
 margin: 0 auto;
 padding: 0;


.parallax--bg,
.parallax--box 
 transition: initial;


.parallax-curtain 
 height: 650px;
 padding-top: 125px;
 background: rgba(255, 255, 255, 0.0);


.pTextContainer 
 width: 100%;
 height: 400px;
 background: transparent;
 text-align: center;


.pText h3 
 font-size: 2em;
 color: white;
 margin: 0 auto;
 padding-top: 2em;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
 <div class="sliderContainer parallax--bg">
 <div class="parallax-curtain">
 <div class="pTextContainer">
 <div class="pText">
 <h3>Knowing when you need help is a big thing</h3>
 <h3>Finding the right help can be a daunting task</h3>
 <h3>I am here to help you</h3>
 </div>
 </div>
 </div>
 </div>

</section>

Your image is offset from the top of the page by about 1000px, meaning by the time you actually scroll to it, the scrollTop() is 1000px. Your calculation results in a background-position of center 250px. The 250px is the whitespace you're seeing.

To account for this, you could do something like offset().top - scrollTop(). This ensures that by the time you've scrolled down to the image, the background-position will be roughly center 0px.

function parallax() 
 var $parallaxBg = $('.parallax--bg');
 var wScroll = $(window).scrollTop();
 var wOffset = $parallaxBg.offset().top;
 var wBackgroundPos = (wScroll-wOffset) * 0.250;

 $parallaxBg.css('background-position', 'center ' + wBackgroundPos + 'px');
 $('.parallax--box').css('top', -5 + (wScroll * 0.0125) + 'em');

Here's an updated version of your codepen.