Create a Sticky Scrolling Effect Using Elementor

In this step-by-step guide, learn how to create a mind-blowing sticky scrolling effect with Elementor.

The ability to create stunning visual effects is immense with Elementor. Web designers can execute their creative ideas faster than ever, and produce designs that would otherwise take much longer before Elementor arrived on the scene. 

In this article, we demonstrate a trick for the sticky scrolling effect, which creates the illusion of a mobile phone sliding down vertically until it overlaps with a second phone. 

This effect was first presented in a web design speed art video we released earlier this week. This optical illusion continues on into the next section where the second mobile phone merges with the third and last one. 

The guide is divided into five steps, following the page structure. We do not go into technical details such as font settings, but instead, focus on the main elements that help us create the sticky scrolling effect. The full technical details appear in the video itself.

Let’s get started!

01

Apply a Sticky Scrolling Effect

After laying the foundations for a landing page — creating a page title, adding a new section with three columns, choosing and styling fonts — you will need to create the effect itself. Insert an image of a mobile phone into the central column. Then go to Edit Image > Advanced > Scrolling Effect > Sticky, and select the Top option.

This sticks the image on the top of the page. To determine the specific point from where the image will stop scrolling down with the page, adjust the offset function, located in the Scrolling Effect panel. We set the offset to 250px.

02

Set a Background Overlay Image

To complete the sticky scrolling effect, set a background overlay image. Then go to Edit Column > Style, and adjust the image size and settings, so the picture will perfectly overlap with the foreground image.

03

Adjust the Z-Index

First, duplicate the first section. Then adjust the mobile image’s z-index values, so it makes the mobile phone slide beneath the second phone in the following section. 

If you’re interested in knowing how we designed the additional images and entrance animation, please watch the video tutorial.

04

Complete the Last Part of the Effect

Duplicate again the first section to create the third section. Here, as in the previous section, you need to adjust the z-index to higher values, so the second mobile phone will slide underneath the third phone image. 

Since this is the section where you want the sticky scrolling effect to stop, go to Edit Image > Advanced > Scrolling Effect > Sticky, and select None.

05

Make the Mobile Disappear

Based on the scrolling effect settings in the two first sections, the mobile phone image will basically keep sliding down, and we don’t want that. This is why you need to apply another trick here.

First off, add a new section. Then add color to it and adjust the section height. Last but not least, adjust the z-index to give your section higher values than the images. This way the images disappear behind the last section.

Did it work for you? Were you able to recreate the magic? Let us know what you thought in the comments section below.

Liked This Article?

We have a lot more where that came from! Join 760,658 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Matan Naveh
Matan Naveh
Matan is Elementor's Magazine editor. Starting his career as a Radio Broadcaster, he worked as a content manager and Editor-in-Chief for over 10 years. Matan enjoys psychological horror movies and 80's Chinese restaurants.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

68 Responses

  1. This is nice information that you shared how Sticky Scrolling Effect Using Elementor, I am really did not have any idea about that, but after read this post now i am able to know the all things which i want to know,Keep sharing your view on this matter.

  2. Wow! Love it..
    just one thing I’m having a small issue on mobile- the first image hides the left column on the way down and z-index doesn’t work for some reason. Could you advise on this one please

  3. Hello! Thank you for this- super helpful. My only problem is with the last image scrolling down and covering my footer. I created that section to hid the image while scrolling down, but I have made a footer with Elementor My Templates.

    1. you can probably use the absolute positioning for this now … newest update makes this easier to implement in the builder.

  4. hank you for this- super helpful. My only problem is with the last image scrolling down and covering my footer. I created that section to hid the image while scrolling down, but I have made a footer with Elementor My Templates.

        1. It turned out that I was running outdated Safari on all my devices (it’s not my primary browser). It’s tied to my OS version and I hadn’t updated my phone or iPad in a while. Now everything seems to be fine.

  5. First, try restarting your computer, printer and wireless router. To check if yourprinter is connected to your network: Print a Wireless Network Test report from the Epson Printer Setup Support. On many printers pressing the Wireless button allows direct access to printing this report.

  6. This is a helpful article for every blogger. I am engaged in blogging for few years and i use Thrive in my website but after reading your article what mistake i have done. Currently i am thinking of using elementor pro. So thanks for sharing this helpful article.

  7. Thanks for the explanation. I am willing to add a floating button in the bottom left as “Call Now” feature on the website but stuck! Can you share it in few easy steps in reply pls. \(oo\

  8. Amazing design and implementation. The only question how I do it on full width template and not only on canvas. On full width elementor template it continue to scroll and get over my footer, so how I make my site wide footer used as “hide” section?

  9. This looks very great, nice tutorial! I still have a question about this stick feature. I have a menu which height is greather than the screen height. I want it to scroll with the content, but stick on the bottom as soon as the bottom of the menu hits the bottom of the screen. Whenever the user scrolls back up, the menu should also go back to the top and stick on the top whenever it hits the top of the page. Can’t get this to work. Hope you can help me with this?

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 760,658 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.