How to stop a fixed background attachment image at certain part of scroll

Question

I have this code for an attached background image. I would like to stop it at a certain part of the screen on scroll. How can I achieve this?

Here is an example.. Would like to stop the icon that looks like its falling right above the optin form https://www.loom.com/share/33bc067a7c64469c99129728ec7ecc2a

.form-image-scroll {
    background: url(https://res.cloudinary.com/dqwzka5cv/image/upload/v1586108678/Tequilas/Website/tacoguy-min.png) no-repeat top 25% right 42% fixed;
}

Answer 1

This is a good opportunity to use position:sticky .

position:sticky is positioned based on your scroll position, but it also stays within its container element. You're going to want to implement this like the "doctor" on Alligator.io

HTML

<div class="container">
  <div class="form-image-scroll"></div>
</div>

CSS

.form-image-scroll {
  position: sticky;
  bottom: 0;
  background: url(https://res.cloudinary.com/dqwzka5cv/image/upload/v1586108678/Tequilas/Website/tacoguy-min.png) no-repeat top 25% right 42% fixed;
}

You may need some additional CSS to properly position it with your other elements and to get the image to properly display, but this will move the element into view during scroll and stop it at the bottom of the container div.