Scrollspy 👁

Plugin returns an element currently visible on the screen.

🔗 Links

Demo 1 (without a RepeatingGroup): Demo | Editor

Demo 2 (vertical RepeatingGroup): Demo | Editor

Demo 3 (horizontal RepeatingGroup): Demo | Editor

Plugin Page

Forum

ℹ️ Introduction

In a nutshell, when you scroll the page (or a Repeating Group), plugin will provide you current element visible on the screen.

Some common use cases:

• Animate an element when it becomes visible on the screen

• Dynamically highlight a nav element in the nav bar (check the demo for an example).

• Dynamically change selected element in a dropdown on scroll

• Dynamically highlight an item in TOC (Table of Content) on scroll

• Calculate the scrolling percentage progress

• ...and more

Scrollspy

🔥 Features

• Can be used to implement the scrollspy feature in Bubble or animate elements

• It works with any Bubble element (returns an element ID)

• It works for Repeating Groups as well (returns visible item / index)

• Works for both, Vertical and Horizontal Repeating Groups

• Get "Current Item", "Current ID", "Current Index" visible on the screen

• Plugin fires an event "Item changed" that you can use in your Workflows

• Setup rules, in which part of the screen an element considered as "visible"

Plugin supports 3 modes:

1. Add Groups, Texts or any other element type on the page and define a unique ID for each element. When you scroll, plugin will provide you current element's ID visible on the screen.

2. RepeatingGroup (Vertical). Add a RepeatingGroup element on the page. When you scroll, plugin will provide you current element visible on the screen and its index.

3. RepeatingGroup (Horizontal). Same as 2 but for a horizontal RepeatingGroup.

📚 Documentation

➡️ Mode 1 : Without RepeatingGroup

Pre-requirement: Install and configure Classify plugin

How to add a custom class or an ID to a Bubble element

1. Add any elements on the page (blocks, texts, images etc). For each element, define a class name and an id (check our demo for an example)

2. In the Scrollspy plugin settings copy paste the same class name.

3. Now you have access to current_id state:

➡️ Mode 2 : Using a Vertical RepeatingGroup

Pre-requirement: Go to Settings -> General and enable the "Expose the option to add an ID attribute to HTML elements" option.

1. Add a RepeatingGroup in your app.

2. Go to your Repeating Group's properties, at the bottom you will see "ID attribute". Add a name here.

3. In the Scrollspy properties define: "RepeatingGroup ID", "Type of content" and "Data source" attributes (exactly the same values as in your RepeatingGroup)

4. Now anywhere in your app you can use the "Scrollspy's Current Index", "Scrollspy's Current Item" or "Scrollspy's Current ID"

➡️ Mode 3: Using a Horizontal RepeatingGroup

The settings are very similar to the Mode 2.