[V6] Create a Sticky Section with Row Element

In this article, we will walk you through the details of how to create a sticky section on your page without adding any custom code.

If you would like to create a Sticky cart for your page, click here for a detailed tutorial.

Design your bar

Step 1: From the GemPages Dashboard, open your preferred template to edit. You can quickly find the Row element on the left sidebar of the Editor, under the Base section.

Step 2: Drag and drop the Row into your preferred position.

Step 3: Nest all the elements you need inside the Row to create a sticky bar as you wish. To style how the Row looks, please navigate to the Design tab and follow the instructions in this article.

Set the bar’s position

The Position feature is currently available only for the Row element.

Step 1: Click on the Row element. You will find its configuration options in the left sidebar.

Step 2: Go to the Position section under the Design tab. You will find 3 options in the dropdown menu:

Relative: Adjust the row relatively to its normal position.
Sticky to the screen (Fixed): Put the row at a fixed position when customers scroll through the page.
Static: The section will stay in the original position.

To make your Row sticky, please select the Sticky to the screen (Fixed) option.

Step 3: For the Relative and Sticky to the screen (fixed) options, you will need to have the Z-index number. It determines the display order, with the higher number being in front of the lower one.

For the sticky bar, the Z-index number is automatically set to 99. This ensures that the sticky bar will always be in front of other elements.

Step 4: Hit “More settings” to further customize the position of the sticky bar.

Under Horizontal Offset, you can choose to have the bar stick to the top or bottom of the page. And for Vertical Offset, left or right. After that, you can keep the auto padding of 0 or set your own (in pixels or percentages) in the two fields below.

To change the configurations on different devices, click the Desktop icon on the right corner.

Set the bar to show or hide on scroll

Skip this step if you prefer the sticky bar to display on your pages at all times.

To show the sticky bar when customers scroll over a certain position on your page, kindly follow the steps below.

Step 1: Click on the Row element to reveal its configuration options in the left sidebar.

Under the Design tab, select Flow Actions.

Step 2: Hit the plus icon to create a new action. Select Page event, and add action “Scrolling to percentage.”

For the sticky bar to show and hide on scroll properly, it’s recommended to add both actions “Show on scroll” and “Hide on scroll” as below.

Show on scroll

Adjust the settings for the action as below:

Trigger when: Select “Scroll top greater than.”
Percentage: Adjust the slider or input the number into the box to determine the position for the sticky bar to start showing.
Run section: Choose “Every time condition met.”

Under the “Target” section, select Add action > Advanced > Show element. Adjust the Duration slider to the minimum value (50ms).

Hide on scroll

Adjust the settings for the action as below:

Trigger when: Select “Scroll top less than.”
Percentage: Adjust the slider or input the number into the box to determine the position for the sticky bar to start hiding.
Run section: Choose “Every time condition met.”

Under the “Target” section, select Add action > Advanced > Hide element. Adjust the Duration slider to the minimum value (50ms).

When everything is in place, hit “Save” then “Publish.” That’s it! You are all set with a sticky bar.

You can save the Sticky bar to your library for later use. Click here for a detailed guide.