The ability to make a canvas sticky allows that canvas to always be visible at either the top or bottom of the browser window regardless of what portion of the page a user is viewing. The most common use for the sticky feature is for the menu/navigation within a site.
To set a canvas to sticky:
1). Select the canvas you wish to make sticky by clicking on it.
2). Click on the canvas tab in the Properties Panel on the right.
There you can choose to set the sticky drop-down menu to None, Top, Bottom, Top on Scroll, and Bottom on Scroll.
None – canvas will scroll with the rest of the page.
Top – canvas will remain “sticky” at the top of the browser window while the user scrolls the page.
Bottom – canvas will remain “sticky” at the bottom of the browser window while the user scrolls the page.
Top on Scroll – canvas will appear at the top of the browser window when the user scrolls the page.
Bottom on Scroll – canvas will appear at the bottom of the browser window when the user scrolls the page.
Offset - allows you to space the canvas off of the top or bottom an amount. This is helpful if you have multiple canvases that stack at the top or bottom and need to be offset from each other.
💡TIP: When using Sticky: Top on a top navigation menu, it may be helpful to also create a buffer canvas of the same height at the top of the page to avoid overlapping the top of your next canvas down. |
Scroll Links Under
If you are creating a menu that is sticky to the “Top” or “Top on Scroll”, there is also an option to Scroll Links Under. When this box is checked, the top of the browser is calculated to be below this canvas for canvas links. This is useful for a header bar that would cover up part of a canvas if it scrolled all the way to the top of the browser when a link was clicked, instead you may want that canvas to be positioned just below that header canvas and checking this box would make this happen. If multiple canvases are stuck to the top, the location for links to go to will be the greatest of the offset plus canvas height of the canvases that have this box checked.
⚠️ If using Sticky: Top on Scroll for a top navigation, the Scroll Links Under setting may not calculate the correct scroll locations. We suggest using Sticky:Top on a top navigation instead (see tip above) |
More Help Articles