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! 😊

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

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. 😊

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more