{"id":18357,"date":"2025-11-03T10:35:08","date_gmt":"2025-11-03T10:35:08","guid":{"rendered":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/"},"modified":"2025-11-04T08:44:23","modified_gmt":"2025-11-04T08:44:23","slug":"how-to-fix-elementor-sticky-header-and-sections-in-animation-addons","status":"publish","type":"docs","link":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/","title":{"rendered":"How to Fix Elementor Sticky Header and Sections in Animation Addons?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">With the Smooth Scroller feature active, you may notice that Elementor sticky sections (like headers or containers) no longer stick. This happens because GSAP Smooth Scroll changes the page\u2019s default scroll behavior, which disables Elementor\u2019s native sticky function.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why It Happens?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Smooth Scroller in Animation Addons replaces the browser\u2019s native scrolling with GSAP-powered smooth scrolling.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since Elementor\u2019s sticky feature depends on the browser\u2019s native scroll position, it can\u2019t detect the movement correctly once Smooth Scroller is enabled.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Recommended Solution \u2014 Use Animation Addons Sticky Elements Feature<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To make elements like headers, menus, or sections sticky while using Smooth Scroller:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open your page in Elementor.<\/li>\n\n\n\n<li>Select the section or container you want to make sticky.<\/li>\n\n\n\n<li>In the Animation Addons panel, go to the <strong>Advanced<\/strong> tab, enable <strong>Sticky Elements<\/strong>, and set your desired values.<\/li>\n\n\n\n<li>Configure your sticky settings using the Content and Active Style tabs.<\/li>\n\n\n\n<li>Update and preview your page. The sticky effect will now work seamlessly with Smooth Scroller.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>For Detailed Setup Guidance, Please Follow this Doc:<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><br>\ud83d\udc49<a href=\"https:\/\/animation-addons.com\/docs\/gsap-e\"> <\/a><a href=\"https:\/\/animation-addons.com\/docs\/gsap-extensions\/sticky-elements\/\">https:\/\/animation-addons.com\/docs\/gsap-extensions\/sticky-elements\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Alternative Option \u2014 Use Animation Addons Theme Builder<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If your sticky header or section is part of your theme:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the Animation Addons Theme Builder.<\/li>\n\n\n\n<li>Copy your existing header layout from Elementor.<\/li>\n\n\n\n<li>Rebuild it using the Theme Builder tools.<\/li>\n\n\n\n<li>Save and apply it to your site.<br><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">This approach ensures full compatibility between Smooth Scroller, Sticky Elements, and GSAP animations.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>With the Smooth Scroller feature active, you may notice that Elementor sticky sections (like headers or containers) no longer stick. This happens because GSAP Smooth Scroll changes the page\u2019s default scroll behavior, which disables Elementor\u2019s native sticky function. Why It Happens? The Smooth Scroller in Animation Addons replaces the browser\u2019s native scrolling with GSAP-powered smooth [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":18392,"parent":24,"menu_order":12,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"doc_badge":[],"class_list":["post-18357","docs","type-docs","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Fix Elementor Sticky Header and Sections in Animation Addons? - Animation Addons<\/title>\n<meta name=\"description\" content=\"With the Smooth Scroller feature active, you may notice that Elementor sticky sections (like headers or containers) no longer stick. This happens because GSAP Smooth Scroll changes the page\u2019s default scroll behavior, which disables Elementor\u2019s native sticky function.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Fix Elementor Sticky Header and Sections in Animation Addons? - Animation Addons\" \/>\n<meta property=\"og:description\" content=\"With the Smooth Scroller feature active, you may notice that Elementor sticky sections (like headers or containers) no longer stick. This happens because GSAP Smooth Scroll changes the page\u2019s default scroll behavior, which disables Elementor\u2019s native sticky function.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/\" \/>\n<meta property=\"og:site_name\" content=\"Animation Addons\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/animationaddons\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-04T08:44:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/11\/How-to-Fix-Elementor-Sticky-Header-and-Sections-in-Animation-Addons_.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"48\" \/>\n\t<meta property=\"og:image:height\" content=\"48\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@animationaddons\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\\\/\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\\\/\",\"name\":\"How to Fix Elementor Sticky Header and Sections in Animation Addons? - Animation Addons\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/How-to-Fix-Elementor-Sticky-Header-and-Sections-in-Animation-Addons_.webp\",\"datePublished\":\"2025-11-03T10:35:08+00:00\",\"dateModified\":\"2025-11-04T08:44:23+00:00\",\"description\":\"With the Smooth Scroller feature active, you may notice that Elementor sticky sections (like headers or containers) no longer stick. This happens because GSAP Smooth Scroll changes the page\u2019s default scroll behavior, which disables Elementor\u2019s native sticky function.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\\\/#primaryimage\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/How-to-Fix-Elementor-Sticky-Header-and-Sections-in-Animation-Addons_.webp\",\"contentUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/How-to-Fix-Elementor-Sticky-Header-and-Sections-in-Animation-Addons_.webp\",\"width\":48,\"height\":48,\"caption\":\"How to fix elementor sticky header and sections in animation addons\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"GSAP Extensions\",\"item\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/gsap-extensions\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Fix Elementor Sticky Header and Sections in Animation Addons?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#website\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\",\"name\":\"Animation Addons\",\"description\":\"Best Animation Plugin for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#organization\"},\"alternateName\":\"Animation Addons for Elementor\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#organization\",\"name\":\"Animation Addons\",\"alternateName\":\"Animation Addons for Elementor\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/logo.svg\",\"width\":48,\"height\":48,\"caption\":\"Animation Addons\"},\"image\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/animationaddons\",\"https:\\\/\\\/x.com\\\/animationaddons\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/animation-addons\\\/\",\"https:\\\/\\\/www.pinterest.com\\\/animationaddons\\\/\",\"https:\\\/\\\/www.instagram.com\\\/aimationaddons\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@animationaddons\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Fix Elementor Sticky Header and Sections in Animation Addons? - Animation Addons","description":"With the Smooth Scroller feature active, you may notice that Elementor sticky sections (like headers or containers) no longer stick. This happens because GSAP Smooth Scroll changes the page\u2019s default scroll behavior, which disables Elementor\u2019s native sticky function.","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:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/","og_locale":"en_US","og_type":"article","og_title":"How to Fix Elementor Sticky Header and Sections in Animation Addons? - Animation Addons","og_description":"With the Smooth Scroller feature active, you may notice that Elementor sticky sections (like headers or containers) no longer stick. This happens because GSAP Smooth Scroll changes the page\u2019s default scroll behavior, which disables Elementor\u2019s native sticky function.","og_url":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/","og_site_name":"Animation Addons","article_publisher":"https:\/\/www.facebook.com\/animationaddons","article_modified_time":"2025-11-04T08:44:23+00:00","og_image":[{"width":48,"height":48,"url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/11\/How-to-Fix-Elementor-Sticky-Header-and-Sections-in-Animation-Addons_.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_site":"@animationaddons","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/","url":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/","name":"How to Fix Elementor Sticky Header and Sections in Animation Addons? - Animation Addons","isPartOf":{"@id":"https:\/\/animation-addons.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/#primaryimage"},"image":{"@id":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/#primaryimage"},"thumbnailUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/11\/How-to-Fix-Elementor-Sticky-Header-and-Sections-in-Animation-Addons_.webp","datePublished":"2025-11-03T10:35:08+00:00","dateModified":"2025-11-04T08:44:23+00:00","description":"With the Smooth Scroller feature active, you may notice that Elementor sticky sections (like headers or containers) no longer stick. This happens because GSAP Smooth Scroll changes the page\u2019s default scroll behavior, which disables Elementor\u2019s native sticky function.","breadcrumb":{"@id":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/#primaryimage","url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/11\/How-to-Fix-Elementor-Sticky-Header-and-Sections-in-Animation-Addons_.webp","contentUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/11\/How-to-Fix-Elementor-Sticky-Header-and-Sections-in-Animation-Addons_.webp","width":48,"height":48,"caption":"How to fix elementor sticky header and sections in animation addons"},{"@type":"BreadcrumbList","@id":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/how-to-fix-elementor-sticky-header-and-sections-in-animation-addons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/animation-addons.com\/docs\/"},{"@type":"ListItem","position":2,"name":"GSAP Extensions","item":"https:\/\/animation-addons.com\/docs\/gsap-extensions\/"},{"@type":"ListItem","position":3,"name":"How to Fix Elementor Sticky Header and Sections in Animation Addons?"}]},{"@type":"WebSite","@id":"https:\/\/animation-addons.com\/docs\/#website","url":"https:\/\/animation-addons.com\/docs\/","name":"Animation Addons","description":"Best Animation Plugin for WordPress","publisher":{"@id":"https:\/\/animation-addons.com\/docs\/#organization"},"alternateName":"Animation Addons for Elementor","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/animation-addons.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/animation-addons.com\/docs\/#organization","name":"Animation Addons","alternateName":"Animation Addons for Elementor","url":"https:\/\/animation-addons.com\/docs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/animation-addons.com\/docs\/#\/schema\/logo\/image\/","url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/logo.svg","contentUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/logo.svg","width":48,"height":48,"caption":"Animation Addons"},"image":{"@id":"https:\/\/animation-addons.com\/docs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/animationaddons","https:\/\/x.com\/animationaddons","https:\/\/www.linkedin.com\/company\/animation-addons\/","https:\/\/www.pinterest.com\/animationaddons\/","https:\/\/www.instagram.com\/aimationaddons\/","https:\/\/www.tiktok.com\/@animationaddons"]}]}},"author_avatar":"https:\/\/secure.gravatar.com\/avatar\/bd5722d076db4b29967f62593a3a0be029c1de818ce6d3e97e16a363eea03d11?s=96&d=mm&r=g","author_name":"Shahriar Iqbal","_links":{"self":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/18357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/comments?post=18357"}],"version-history":[{"count":2,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/18357\/revisions"}],"predecessor-version":[{"id":18359,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/18357\/revisions\/18359"}],"up":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/24"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/media\/18392"}],"wp:attachment":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/media?parent=18357"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/doc_tag?post=18357"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/doc_badge?post=18357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}