Как остановить фиксированное фоновое вложение изображения в определенной части прокрутки

Question

У меня есть этот код для прикрепленного фонового изображения. Я хотел бы остановить его на определенной части экрана при прокрутке. Как мне этого добиться?

Вот пример .. Хотелось бы остановить значок, который выглядит так, как будто он падает прямо над формой optin 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

Это хорошая возможность использовать position:sticky.

position:sticky позиционируется в зависимости от вашей позиции прокрутки, но также остается внутри элемента контейнера. Вы захотите реализовать это как «доктор» на 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;
}

Вам может понадобиться дополнительный CSS, чтобы правильно расположить его вместе с другими вашими элементами и получить изображение для правильного отображения, но это переместит элемент в поле зрения во время прокрутки и остановит его в нижней части контейнера div.