How to Build a Scroll Spy

Scroll spy is available on Master Layouts only.

Setting up the Master Layout

Enabling the Fixed Region

If you want the scroll spy menu to always be visible at the top of the page, then be sure you add the scroll spy menu to the top-most region in your master layout and turn on Fixed Region in the region settings. This is optional; you do not have to use fixed region with scroll spy.

  1. In the top region in your master layout, edit the Region Settings and turn on Fixed Region. Note: this option is only available on the first, or top-most, region in the master layout.
    User-added image

 

 

Setting up Scroll Spy Menu

  1. Add a menu widget to the master layout. Select the menu you wish to use and turn on Scroll Spy by clicking the button on the menu widget.
    User-added image

  2. Set the End At Level for your menu. Note that leaving the End At Level to the default (end at last level) or setting it to 2 or higher will show subnavigation for the menu, which will give the user the ability to bypass the scroll spy content on the page and go directly to the child pages. If you want to encourage users to view the content on the page, we recommend setting the End At Level to 1.
    User-added image

  3. Select where you want the page to scroll for each level 1 menu section, by selecting the section from the Spy dropdown. This would be the point on the page where the viewport scrolls for each section of your page.
    User-added image

    Once you have set a level 1 section anchor, it will not be available as a choice in the other Spy dropdowns, and it will show as blue in the scroll spy menu widget to signify it has been set.
    User-added image

  4. Apply a Dropdown Menu style to the scroll spy menu. Note: only dropdown menu styles work with the scroll spy menu.

FAQ

  • Can I add a scroll spy menu to a page?

    • Scroll spy can only be added to a master layout. You could build a specific master layout for the page, if needed.