DigitalEye Plugins
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​

ℹī¸ 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

đŸ”Ĩ 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:
    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.
    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.
    RepeatingGroup (Horizontal). Same as 2 but for a horizontal RepeatingGroup.

📚 Documentation

➡ī¸ Mode 1 : Without RepeatingGroup

Pre-requirement: Install and configure Classify plugin
    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.
    Add a RepeatingGroup in your app.
    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.
Last modified 6mo ago