I am trying to create a sticky image while scrolling using locomotive-scroll and VueJS.
https://i.sstatic.net/mMvI2.jpg I want the content on the left to move, but not the image on the right.
My goal is to make the image stick when its top reaches the top of the page and unstick it when the content disappears completely from view.
Below is my HTML code:
<div id="aboutMe" data-scroll-section>
<h2 class="paragraph-header top-left" data-scroll data-scroll-speed="6">
Hello new page
</h2>
<p class="content top-left" data-scroll data-scroll-speed="3">
This is the content of my about page, you will learn facts about me which
are quite fun because I'm so interesting! This is the content of my about
page, you will learn facts about me which are kind of amusing because I'm so
entertaining!
</p>
<img
src="../assets/pictures/cathedrale.jpg"
alt="picture of Notre Dame de Reims"
class="picture top-right"
data-scroll
/>
</div>
CSS:
JavaScript:
I have followed the documentation but the image is still scrolling with the page. I suspect the issue may be due to the grid display I am using, but I'm not entirely sure.
Any help would be greatly appreciated. Thank you!