{"id":16551,"date":"2018-09-05T09:10:09","date_gmt":"2018-09-05T09:10:09","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=16551"},"modified":"2025-12-05T20:33:48","modified_gmt":"2025-12-05T18:33:48","slug":"sticky-scrolling-effect","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/","title":{"rendered":"Create a Sticky Scrolling Effect Using Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"16551\" class=\"elementor elementor-16551\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9c45c3e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9c45c3e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f003cef\" data-id=\"f003cef\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e598917 elementor-widget elementor-widget-text-editor\" data-id=\"e598917\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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.\u00a0<\/p><p>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.\u00a0<\/p><p>This effect was first presented in a <a href=\"https:\/\/www.youtube.com\/watch?v=0MQGxW3kjOI\" target=\"_blank\" rel=\"noopener\">web design speed art video<\/a>\u00a0we 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.\u00a0<\/p><p>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.<\/p><p>Let&#8217;s get started!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bbc0ca read-more-link elementor-widget elementor-widget-heading\" data-id=\"0bbc0ca\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/\">Learn how to create a Sticky Sidebar Menu!<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-863e60c read-more-link elementor-widget elementor-widget-heading\" data-id=\"863e60c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/blog\/shrinking-sticky-header\/\">See how to create a Shrinking Sticky Header!<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d6c7d03 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d6c7d03\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2bf3a32\" data-id=\"2bf3a32\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d1b227b elementor-widget elementor-widget-heading\" data-id=\"d1b227b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">01 Apply a Sticky Scrolling Effect<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cfc449b elementor-widget elementor-widget-video\" data-id=\"cfc449b\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2018\/09\/step1.mp4\" autoplay=\"\" loop=\"\" controls=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-80b7a77 elementor-widget elementor-widget-text-editor\" data-id=\"80b7a77\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After laying the foundations for a <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/landing-page-builder\/\"   title=\"Landing Page Builder\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26811\">landing page<\/a> \u2014 creating a page title, adding a new section with three columns, choosing and styling fonts \u2014 you will need to create the effect itself. Insert an image of a mobile phone into the central column. Then go to Edit Image &gt; Advanced &gt; Scrolling Effect &gt; Sticky, and select the Top option.<\/p><p>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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ccd897b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ccd897b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-81c6019\" data-id=\"81c6019\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e03026f elementor-widget elementor-widget-heading\" data-id=\"e03026f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">02 Set a Background Overlay Image<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ac6da51 elementor-widget elementor-widget-video\" data-id=\"ac6da51\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2018\/09\/step2.mp4\" autoplay=\"\" loop=\"\" controls=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d64647 elementor-widget elementor-widget-text-editor\" data-id=\"5d64647\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To complete the sticky scrolling effect, set a background overlay image. Then go to Edit Column &gt; Style, and adjust the image size and settings, so the picture will perfectly overlap with the foreground image.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c3e2a5a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c3e2a5a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9a03d3a\" data-id=\"9a03d3a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9cfa9cc elementor-widget elementor-widget-heading\" data-id=\"9cfa9cc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">03 Adjust the Z-Index<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7119de7 elementor-widget elementor-widget-video\" data-id=\"7119de7\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2018\/09\/step3.mp4\" autoplay=\"\" loop=\"\" controls=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8bf8ab8 elementor-widget elementor-widget-text-editor\" data-id=\"8bf8ab8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>First, duplicate the first section. Then adjust the mobile image&#8217;s z-index values, so it makes the mobile phone slide beneath the second phone in the following section.\u00a0<\/p><p>If you&#8217;re interested in knowing how we designed the additional images and entrance animation, please watch the video tutorial.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0a3ef99 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0a3ef99\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-91a32f9\" data-id=\"91a32f9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5d60bc1 elementor-widget elementor-widget-heading\" data-id=\"5d60bc1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">04 Complete the Last Part of the Effect<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b57eb5e elementor-widget elementor-widget-video\" data-id=\"b57eb5e\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2018\/09\/step4.mp4\" autoplay=\"\" loop=\"\" controls=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f41d67c elementor-widget elementor-widget-text-editor\" data-id=\"f41d67c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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.\u00a0<\/p><p>Since this is the section where you want the sticky scrolling effect to stop, go to Edit Image &gt; Advanced &gt; Scrolling Effect &gt; Sticky, and select None.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3bb729e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3bb729e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8c1fb59\" data-id=\"8c1fb59\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c9b0c8e elementor-widget elementor-widget-heading\" data-id=\"c9b0c8e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">05 Make the Mobile Disappear<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1526b9c elementor-widget elementor-widget-video\" data-id=\"1526b9c\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2018\/09\/step5.mp4\" autoplay=\"\" loop=\"\" controls=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f5052d6 elementor-widget elementor-widget-text-editor\" data-id=\"f5052d6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Based on the scrolling effect settings in the two first sections, the mobile phone image will basically keep sliding down, and we don&#8217;t want that. This is why you need to apply another trick here.<\/p><p>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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-54f1b1d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"54f1b1d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a58cf11\" data-id=\"a58cf11\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-106250e elementor-widget elementor-widget-text-editor\" data-id=\"106250e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Did it work for you? Were you able to recreate the magic? Let us know what you thought in the comments section below.<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In this step-by-step guide, you will learn how to create a mind-blowing sticky scrolling effect with Elementor.<\/p>\n","protected":false},"author":53499,"featured_media":16708,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[44,32,43],"tags":[79,173],"marketing_persona":[],"marketing_intent":[],"class_list":["post-16551","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-design","category-wordpress","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create a Sticky Scrolling Effect Using Elementor<\/title>\n<meta name=\"description\" content=\"In this step-by-step guide, you will learn how to create a mind-blowing sticky scrolling effect with Elementor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Sticky Scrolling Effect Using Elementor\" \/>\n<meta property=\"og:description\" content=\"In this step-by-step guide, you will learn how to create a mind-blowing sticky scrolling effect with Elementor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-09-05T09:10:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-05T18:33:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/09\/cover-image-Tutorial.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Matan Naveh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matan Naveh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/\"},\"author\":{\"name\":\"Matan Naveh\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/da95923351c8e54d52a7cffc6c094558\"},\"headline\":\"Create a Sticky Scrolling Effect Using Elementor\",\"datePublished\":\"2018-09-05T09:10:09+00:00\",\"dateModified\":\"2025-12-05T18:33:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/\"},\"wordCount\":595,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/09\/cover-image-Tutorial.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Elementor\",\"Web Design\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/\",\"url\":\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/\",\"name\":\"Create a Sticky Scrolling Effect Using Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/09\/cover-image-Tutorial.png\",\"datePublished\":\"2018-09-05T09:10:09+00:00\",\"dateModified\":\"2025-12-05T18:33:48+00:00\",\"description\":\"In this step-by-step guide, you will learn how to create a mind-blowing sticky scrolling effect with Elementor.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/09\/cover-image-Tutorial.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/09\/cover-image-Tutorial.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Create a Sticky Scrolling Effect Using Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/da95923351c8e54d52a7cffc6c094558\",\"name\":\"Matan Naveh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5f68b9dad97d42f1008a865a76e87f240b8ab8d458c9aeb0f51a80982339e9ed?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5f68b9dad97d42f1008a865a76e87f240b8ab8d458c9aeb0f51a80982339e9ed?s=96&d=mm&r=g\",\"caption\":\"Matan Naveh\"},\"description\":\"Matan started his career as a Radio Broadcaster, he worked as a content manager and Editor-in-Chief for over 15 years. Matan enjoys psychological horror movies and 80's Chinese restaurants.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/matannaveh\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Sticky Scrolling Effect Using Elementor","description":"In this step-by-step guide, you will learn how to create a mind-blowing sticky scrolling effect with Elementor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/","og_locale":"en_US","og_type":"article","og_title":"Create a Sticky Scrolling Effect Using Elementor","og_description":"In this step-by-step guide, you will learn how to create a mind-blowing sticky scrolling effect with Elementor.","og_url":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2018-09-05T09:10:09+00:00","article_modified_time":"2025-12-05T18:33:48+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/09\/cover-image-Tutorial.png","type":"image\/png"}],"author":"Matan Naveh","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Matan Naveh","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/"},"author":{"name":"Matan Naveh","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/da95923351c8e54d52a7cffc6c094558"},"headline":"Create a Sticky Scrolling Effect Using Elementor","datePublished":"2018-09-05T09:10:09+00:00","dateModified":"2025-12-05T18:33:48+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/"},"wordCount":595,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/09\/cover-image-Tutorial.png","keywords":["Build","Video"],"articleSection":["Elementor","Web Design","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/","url":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/","name":"Create a Sticky Scrolling Effect Using Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/09\/cover-image-Tutorial.png","datePublished":"2018-09-05T09:10:09+00:00","dateModified":"2025-12-05T18:33:48+00:00","description":"In this step-by-step guide, you will learn how to create a mind-blowing sticky scrolling effect with Elementor.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/09\/cover-image-Tutorial.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/09\/cover-image-Tutorial.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"Create a Sticky Scrolling Effect Using Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/da95923351c8e54d52a7cffc6c094558","name":"Matan Naveh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5f68b9dad97d42f1008a865a76e87f240b8ab8d458c9aeb0f51a80982339e9ed?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5f68b9dad97d42f1008a865a76e87f240b8ab8d458c9aeb0f51a80982339e9ed?s=96&d=mm&r=g","caption":"Matan Naveh"},"description":"Matan started his career as a Radio Broadcaster, he worked as a content manager and Editor-in-Chief for over 15 years. Matan enjoys psychological horror movies and 80's Chinese restaurants.","url":"https:\/\/elementor.com\/blog\/author\/matannaveh\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/16551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/53499"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=16551"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/16551\/revisions"}],"predecessor-version":[{"id":146756,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/16551\/revisions\/146756"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/16708"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=16551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=16551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=16551"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=16551"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=16551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}