want image to scroll up, then freeze, then text to scroll over it

Question

I have an element with a background image that's a little taller than the height of the screen. As the user scrolls down, I want the image to scroll up until the bottom of the image is flush with the bottom of the window, then freeze the image, then allow the text to scroll on top of the image.

I'm having two problems. One is, I want the text to have a transparent background, so it flows over the image without having a white background that covers the background image. The other is putting everything into reverse if the user scrolls the other way. Does anyone have a solution please?

$(document).ready(function() {

  var heightOfIntro = $('#partone').height() - $(window).height();


  $(function() {
    $(window).scroll(function() {
      if ($(this).scrollTop() >= heightOfIntro) {
        $('.parallax').css('background-attachment', 'fixed');

      } else {
        $('.parallax').css('background-attachment', 'absolute');
      }


    });
  });


});

.parallax {
  /* Full height */
  height: 1180px;
  background-attachment: absolute;
  background-position: right top;
  background-repeat: no-repeat;
  position: relative;
}

.parallax#partone {
  background-image: url('../img/rogers_bg.jpg');
  background-color: #eaf1f4;
}

.story {
  width: 50%;
  padding: 20px;
  overflow: hidden;
}

.story p {
  color: black;
  font-family: 'proxima-nova', sans-serif;
  font-size: 100%;
  line-height: 110%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax" id="partone">
  <div class="story">
    <p>Mr. Utterson the lawyer was a man of a rugged countenance, that was never lighted by a smile; cold, scanty and embarrassed in discourse; backward in sentiment; lean, long, dusty, dreary, and yet somehow lovable. At friendly meetings, and when the
      wine was to his taste, something eminently human beaconed from his eye; something indeed which never found its way into his talk, but which spoke not only in these silent symbols of the after-dinner face, but more often and loudly in the acts of
      his life. He was austere with himself; drank gin when he was alone, to mortify a taste for vintages; and though he enjoyed the theatre, had not crossed the doors of one for twenty years. But he had an approved tolerance for others; sometimes wondering,
      almost with envy, at the high pressure of spirits involved in their misdeeds; and in any extremity inclined to help rather than to reprove. I incline to Cain's heresy, he used to say quaintly: I let my brother go to the devil in his own way. In
      this character it was frequently his fortune to be the last reputable acquaintance and the last good influence in the lives of down-going men. And to such as these, so long as they came about his chambers, he never marked a shade of change in his
      demeanour.
    </p>

  </div>
</div>

Answer 1

This is just a thought of how to solve the issue. I think there is more. You would need to do some error checking. But I dont have this effectively tested atm.

  $(document).ready(function() {
  function scrollStatus(){
      var offheight = $('.parallax').offset().top; //get height of the image
      if ($(this).scrollTop() >= offheight) {

        $('.parallax').removeClass('fixedAb').addClass('fixedPos'); //use addclass to simplify the add subtract of the position

      } else {
        $('.parallax').removeClass('fixedPos').addClass('fixedAb');
      }
  }
  scrollStatus();
  $(window).on('scroll',function(){
    scrollStatus();
  });

});