Parallax code working BUT starts to late

So I have been collating parallax info that GP people have been posting and I have got it working well – BUT – for some reason and I cannot work out why – the text starts much lower dowmn the image than I want and then goes off the page and behind the block below it

I have added link to page in private info box

Parallax created as an element – block with image – tagged with parallax-wrapper – as main container

with CSS code

.parallax-wrapper {
    overflow-y: hidden;
}

.parallax {
    overflow-y: hidden;
}

and parallax JS hooked into footer

<script>
window.addEventListener('scroll', throttle(parallax, 14));

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
};

function parallax() {
  var scrolled = window.pageYOffset;
  var parallax = document.querySelector(".parallax");
  // You can adjust the 0.4 to change the speed
	var coords = (scrolled * 0.3) + 'px'
  parallax.style.transform = 'translateY(' + coords + ')';
};
</script>

I am also using SAL scripts to animate the text above – but even when removed the parallax still does it

I have also got the depicter slider for the banner – again when I disable that – the text for parallax starts higher but still disappears off the page – so its better but not right

Its like its expecting the parallax to be the very first thing and its not?!

Any ideas to assist or point me in the direction to play?

thank you
Sarah