V4 Extentions Sticky Estimated reading: 6 minutes 4 views Keep a container fixed on the screen while the visitor scrolls. Great for sidebars, menus, price cards and headers. No code needed. WORKS ON Containers USE IT FOR Sidebars, bars, cards PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS PRO Active license Tip: Install and activate both Animation Addons plugins before you start. Sticky works on Flexbox, Div Block and Grid containers. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab, then click Interaction. Under Interaction Extensions, turn on Sticky. Click Save Settings. Sticky Extension (click to zoom) STEP 2 Make a Container Sticky Pick the container you want to keep on screen, then turn Sticky on. Open your page with the Elementor Editor. Select a Flexbox or Div Block, for example your sidebar. In the General tab, open the Sticky/Pin Element section. Turn on Enable Sticky. Click Update to save your page. Sticky/Pin Element section (click to zoom) The options after you turn on Enable Sticky (click to zoom) Tip: The container must have room to travel. Put it inside a taller container, such as a row with a long column next to it. In a row, set the sticky container’s Align Self to Start, so it does not stretch to the full height. SETTINGS Content Tab Enable Sticky Default: OffTurns Sticky on for this container. You can set it for each device. Pin Trigger Default: DefaultThe element whose position starts the pin. Default uses the container itself. Choose Custom to type a class like .my-area or an ID like #my-area in Custom Pin Area. Pin End Trigger Default: DefaultThe element that decides when the pin stops. Default uses the container that holds your sticky container. Choose Custom to type your own class or ID in Custom Pin End Area. Pin Default: DefaultThe element that gets pinned. Default pins the container itself. Choose Custom to pin another element with Custom Pin. Pin Start Default: top topWhen the pin starts. The first word is a spot on the element. The second is a spot on the screen. top top means: when the top of the element reaches the top of the screen. top 100px keeps 100px free at the top. Pin End Default: bottom bottomWhen the pin stops. bottom bottom means: when the bottom of the end element reaches the bottom of the screen. Pin Spacing Default: FalseChoose True to leave an empty space where the container was, so the content below does not jump up. Pin Markers Default: OffShows start and end lines on the page. Use it to test your Pin Start and Pin End values, then turn it off. Enable On Editor Default: OffLets the container stick inside the Elementor editor too, so you can test while you build. All options in the Content tab (click to zoom) Style Tab These styles apply only while the container is stuck. When it is released, they go away. Toggle Class Adds your class to the container while it is stuck. Use it to restyle the container in your own CSS. Type the class name, with or without the dot. Border A border that appears while the container is stuck. Background Color A background color that fades in while the container is stuck. The Style tab (click to zoom) RESULT Final Result Three common setups. The GIFs show a scroll down the page. 1. Sticky sidebar (default settings) Only Enable Sticky is on. The sidebar stays at the top while the long column scrolls, then leaves when its row ends. The sidebar stays on screen until its row ends 2. Sticky bar that changes style Background Color is yellow and Border is a 3px bottom line. The bar turns yellow when it sticks. The bar gets its color and border while it is stuck Tip: If the content slides over your bar, give the bar a higher Z-Index in the Style tab, under Position. 3. Start lower and stop at a chosen element Pin Start is top 100px, so the card keeps a gap at the top. Pin End Trigger is Custom with #stop-here, so the card stops when it reaches the red heading. The card stops at the chosen element GOOD TO KNOW How It Works Where it stops By default a sticky container stops at the end of the container that holds it. If it is in a header, or has a menu inside, it stops at the end of the page. Per device Enable Sticky, Pin Start and Pin End can be different on desktop, tablet and mobile. Turn Sticky off on mobile if it takes too much room. Live page Sticky runs on the live page. Turn on Enable On Editor to test inside the editor. Only loads when used Pages with no sticky container do not load any extra script. HELP Troubleshooting I do not see the Sticky/Pin Element section Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) > Interaction and turn on Sticky. Then reload the editor and select a Flexbox or Div Block. The section does not show on headings or other widgets. My container does not stick Sticky needs room to move. The container that holds it must be taller than your sticky container. In a row, set Align Self to Start on the sticky container. Also check that Pro is active and test on the live page. It sticks but sits behind other content Raise the Z-Index of the sticky container in the Style tab, under Position. It stops too early or too late Change Pin End or choose a Pin End Trigger. Turn on Pin Markers to see the start and end lines. The content below jumps when it sticks Set Pin Spacing to True. You Did It Your container now stays on screen while visitors scroll. If you face any problem, please contact our support team. We are happy to help.
