Sticky Position

The Stick Position feature is the ideal way to add a sticky navbar to the top of your webpage. It's great also for setting up things like a sticky navigation in a sidebar as you scroll through a product page.

How it works

You can use this feature on anything on your page with the understanding that the element you choose to use it on will be sticky to the parent container in relation to the top of the browser.

Take into account that the design from Figma needs to be consistent with the desired layout. If you need an element to be on top of the page, the design from Figma into Quest must have that element naturally positioned there. Quest only will add some CSS properties to the element and its container.

This won’t work:

Assigning Sticky to a top-level element

In this instance, you want a navbar to be stuck to the top of the screen and the "navbar" element is at the top-level of the layers in Figma.

Assigning Sticky to a child of a container

In this instance, you may have a 4000px tall "Sidebar holder" container and if you choose to add sticky top to it's child ("sidebar links") that child will stick to the top of that container as you scroll. As long as the "Sidebar holder" is in view in the browser, the child will be at the top of it in the browser view. If you scroll past it, the child will move out of view with the parent and no longer be stuck to the browser's top.

If the parent container of the sticky element is the same size as the element you're applying it to, you will not see any difference as you scroll.

Feature Options

The feature has 2 different toggles. You can choose where to stick things (top or bottom) and how they are layered in relation to other elements in the component/page (above or below).

Stick to Top

Use this setting when you want things to stick to the top of the page or their container. This is great for navbars. The element with the added sticky feature must be located at the top of it's parent container for this to work best.

Stick to Bottom

Use this setting when you want things to stick to the bottom of the page. This is great for call to actions or GDPR messaging. The element with the added sticky feature must be located at the bottom of it's parent container for this to work best.

Design elements will not automatically move to from top to bottom or from bottom to top. They must be placed in their parent at the starting location for the sticky feature to work properly.

Layer Above

Use this setting to override the z-index of the element you're adding the sticky feature to. Layer Above means it will show up above all other layers in your design. This sets the z-index to 3000 behind the scenes.

Layer Below

Use this setting to override the z-index of the element you're adding the sticky feature to. Layer Below means it will show up below all other layers in your design. This sets the z-index to -3000 behind the scenes.

CSS Properties added to Sticky Elements

Stick to Top / Layer Above

{
position: "sticky";
top: 0;
z-index: 3000;
}

Stick to Top / Layer Behind

{
position: "sticky";
top: 0;
z-index: -3000;
}

Stick to Bottom / Layer Above

{
position: "sticky";
bottom: 0;
z-index: 3000;
}

Stick to Bottom / Layer Behind

{
position: "sticky";
bottom: 0;
z-index: -3000;
}

Note - Unexpected Behavior for bottom elements in Preview Mode

When in Preview Mode, if you have one or more elements that should be positioned at the bottom, there is a possibility that unexpected behavior may happen. This is a known issue and it is related to the way that the element or elements are positioned inside the iframe that Quest uses to preview the pages and components.

This unexpected behavior may also vary between browsers such as Safari and Chrome.

But don’t worry, this unexpected behavior is not present in the exported code.