Check out this example: https://jsfiddle.net/atg5m6ym/5079/
In the example, you can see that in order to view the message "Hello!" you need to scroll down. Additionally, there is an animation applied to a div which moves it down below the screen:
$("div").animate({top: '3000px'}, 6000);
Observe how the scrollbar changes as a result, making the page much longer.
What I want to achieve is for users to be able to scroll down to see the "Hello!" text if it's not visible on their screen. However, I do not want the div itself to affect the vertical scrollbar when it reaches the bottom of the screen. Instead, I would like the div to continue moving beyond the screen without impacting the scrollbar. Essentially, the scrollbar should not follow the movement of the div.
If I were to use "overflow-y: hidden" it would prevent users from scrolling downward freely to read the "Hello!" Is there any way to achieve both effects using JS (preferably jQuery) or CSS?
EDIT: It's important to note that I still want the div to remain visible, so fading it out is not an option. Even if the div goes off-screen and then returns or moves in an elliptical pattern, I would like it to reappear without affecting the scrollbar.