Scroll Progress Element

The Scroll Progress Bar Element can be implemented in several different ways. With the Progress Bar Position option, it can be Fixed to the Top, or the Bottom of the Viewport, or it can be set to Content Flow, which essentially means you can place it anywhere in the content.

So the first thing to decide is where you want it positioned. With both Fixed To Top, and Fixed To Bottom positions, the Scroll Progress Bar extends the full width of the Viewport, and regardless of where you place the Element in your page content, on the front end, it is positioned at the very top or the very bottom of the Viewport. If you have a Sticky Header, it remains above the Sticky Header when active.

When using the Content Flow Position, the Scroll Progress bar remains in the flow of content, wherever you have placed it, but is then also limited to the container width you set. There is a Z Index option, that allows you to ensure the bar is seen above other content, several design options to control the colors and size of the bar, and even border options.

The Scroll Progress Element is likely even more useful in a Layout. In this case, you simply need to add the Element to one of the Layout Sections assigned to the Layout. If you choose Fixed To Top, or Fixed To Bottom positioning, then it doesn’t even matter which Layout Section, or where in the Layout Section it is placed. It will then display at the very Top, or the Bottom of the viewport on the pages set by the condition of the Layout.

If you choose Content Flow however, the Scroll Bar will display precisely in the position you place it in the Layout Section you place it in. In this way, for example, you could place it in a Header Layout, so that it displays at the bottom of a sticky container as the page scrolls. To add the Element in this way, consider exactly where you want the Scroll Progress bar to display. Amongst the things to consider are whether you want the bar to go the full width of the viewport, whether you need it to be Sticky, the Z-Index, to potentially keep it on top of a Sticky header, and the margins etc.