Parallax Feature is splitting my image in two vertical halves

Question

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>

Answer 1

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.