DEV Community

Anwar Achilles
Anwar Achilles

Posted on • Edited on

Scrolling Sticky Overlay Effect with Javascript

Have you ever noticed a page scroll effect that feels like flipping through a book? Here, we’ll create that effect, which we’ll call a scrolling sticky overlay. Below is a short example along with the code.

🖥️ Showcase Preview:




🔗 Visit My Channel

If you're interested in learning more, check out my YouTube channel where I share tutorials, tips, and coding experiments. Don't forget to subscribe and stay tuned for more!
youtube.com/@anwarachilles
tiktok.com/@anwar.achilles

🛠️ Let’s Connect!

Let’s connect more closely! Follow my social media accounts below, and don’t hesitate to reach out if you have exciting ideas for experiments or collaborations.
anwarachilles.pro
instagram.com/anwar_achilles
github.com/AnwarAchilles

Hope you like it! 😊

Top comments (2)

Collapse
 
tomj profile image
Tom J.

Nice! Did you make it for some project of yours?
Since sticky came to the scene, it helped so much. Although not too performant, webview on iPhones can struggle with that. For these cases, I can't wait for that scrolling animation API to come to play.

Collapse
 
anwarachilles profile image
Anwar Achilles

Thanks! I actually made this for everyone, not just for a specific project of mine. I didn’t really consider performance on iPhones, though, so that’s valuable feedback. I’m happy it’s been helpful! I’ll keep exploring small snippet ideas for other developers. 😊