Advanced uses of the Row element in designing a sticky bar on your page

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.

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.

If you want to include the Add to cart function, the Row should be located in a Product Module to work correctly. For a detailed guide on how to create a sticky cart, check out this article.

 

Step 3: Nest all the elements you need inside the Row.

To style how the Rows 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. 

 

If you need any assistance taking these actions, please let us know directly via email & live chat to have them answered!


Was this helpful?