I want to create a scroll animation on my webpage.

And my plan is to have the user scroll down the page and a word coming into view from the bottom of the page. (basically just a decently sized margin-top)

The issue is that I don't want the user to be able to "just" scroll past this word. I want the word to "stop" moving together with the scroll for a certain scroll distance when the word hits the center of the screen.

I can probably code some js to get this effect by checking the scroll position and changing the top value of some element. But I am afraid of it stuttering, so is it possible to do something like this in pure css, or if not: is there any way of doing it in js and making sure that it is smooth?