0

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>
Gerardo BLANCO
  • 5,590
  • 1
  • 16
  • 35
LauraNMS
  • 2,720
  • 7
  • 39
  • 73
  • Your basically trying to achieve the same effect of sticky headers. – Cam Feb 06 '18 at 18:28
  • You need to A. Know the height of the image. B. the offset of the window to the image. C. Add the two of them together. D. Set a window trigger at C's value. – Cam Feb 06 '18 at 18:30
  • @Cam: In the jquery code, I have set the trigger. The problems are: 1) the text background overlays the background image and 2) how to undo the effect. My code to undo it doesn't work. – LauraNMS Feb 06 '18 at 18:37
  • See my code at the bottom.. Dont use CSS. Its the cause of the issue, use classes to add / subtract or undo. – Cam Feb 06 '18 at 18:39

1 Answers1

0

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();
  });

});
Cam
  • 1,884
  • 11
  • 24
  • Probably then remove the offheight, but if you dont get the height of the actual img, you arent getting the real offset height. Trust me i have had this issue with jump to effect. – Cam Feb 06 '18 at 18:40
  • It doesn't work. The image stays fixed without scrolling at all, and the text scrolls up with a background that lays over the parallax element. – LauraNMS Feb 06 '18 at 18:54
  • https://codepen.io/designsbycamaron/pen/RQGZda here is a pen with your current code. – Cam Feb 06 '18 at 19:01
  • Fixed it! Works now – Cam Feb 06 '18 at 19:07
  • Two confusing things going on though, that are causing your issue imo. One, your background is 1180px height. Why? Secondly the text is stacked at the top. So your wanting to scroll only to the bottom, yet the text goes away before it reaches the bottom. So thats confusing. Do you have a diagram or example mockup. – Cam Feb 06 '18 at 19:15
  • https://jsfiddle.net/vtpkxebg/6/ Here is my code in your project. You just need to tweak it. but that should do it.. – Cam Feb 06 '18 at 19:55
  • No, now the background image just jumps up, it doesn't scroll. – LauraNMS Feb 07 '18 at 15:30