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.
How to Make a Canvas 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.
Note: When creating a sticky canvas, make sure that the stacking order for your sticky canvas is set higher than the other canvases in your design so that your menu rests on top of the other canvases.
Sticky Options
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
This option allows you to set the space of the canvas off of the top or bottom by a determined amount. This is helpful if you have multiple canvases that stack at the top or bottom that need to be offset from each other.
Note: 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).
Transparent Menu
When making a sticky menu you may want to create a transparent effect that makes it seem as though elements of your menu are floating above the other canvases as you scroll.
To do this, you would need to make the background of this sticky menu transparent. You can do so by clicking on the sticky menu canvas and choosing the Canvas Background tab in the right side Properties Panel. Clicking the Color option here will allow you to change the background color of this canvas or make the background transparent.
Choose to make the background transparent. Then, shrink the size of the canvas to one pixel by clicking and dragging the canvas height icon on the left side of the design app.
Now your sticky menu items will float above the other canvases when you scroll in preview!
Note: You may want to add background shapes to your menu items, as plain text can be difficult to see on some backgrounds.
