Skip to main content

Handling Sticky Elements

Learn how to handle pages that have sticky elements during visual testing

As part of stabilising the webpage to ensure consistency across snapshots, Percy handles sticky elements by showing them only once per screenshot.

To enable this behaviour Percy modifies the positions of sticky elements in the DOM before taking the screenshot.

Sticky Element

Why Percy makes sticky element static in screenshot?

Percy visualise full page screenshots to be taken at the state when the webpage was open in browser. In that state, fixed or static positioned elements will only be present once i.e. at the top of the webpage and rest of webpage will be without the sticky elements.

Example

In the below video, the navigation bar at top and cookie banner at bottom of page are the sticky element. They remain fixed throughout the DOM height.

Sticky Element - Sample

However, in Percy screenshot we will show navigation bar and cookie banner at the top only and would not repeat those elements in the rest of the DOM snapshot.

Sticky Element - Appears only once

What changes in DOM while rendering?

As we modify the sticky elements, the stacking context changes for the children elements. For example, if there is an absolute positioned element inside a sticky element, it will be positioned with respect to parent of sticky element.

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy