> For the complete documentation index, see [llms.txt](https://bubble.digital-bird.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bubble.digital-bird.com/plugins/scrollspy.md).

# Scrollspy 👁

## 🔗 Links

> **Demo 1** (without a RepeatingGroup): [Demo](https://scrollspy.bubbleapps.io/ids) | [Editor](https://bubble.io/page?name=ids\&id=scrollspy\&tab=tabs-1)

> **Demo 2** (vertical RepeatingGroup): [Demo](https://scrollspy.bubbleapps.io/) | [Editor](https://bubble.io/page?name=index\&id=scrollspy\&tab=tabs-1)

> **Demo 3** (horizontal RepeatingGroup): [Demo](https://scrollspy.bubbleapps.io/horizontal) | [Editor](https://bubble.io/page?name=horizontal\&id=scrollspy\&tab=tabs-1)

> [Plugin Page](https://bubble.io/plugin/scrollspy-1610326820506x757120895346278400)

> [Forum](https://forum.bubble.io/t/plugin-announcement-scrollspy/136050)

## ℹ️ 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](/files/-MXg0ci69Zs2GYfMgdw2)

## 🔥 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

{% content-ref url="/pages/-MXfykQSfukoAWO5UBlp" %}
[How to add a custom class or an ID to a Bubble element](/classify.md)
{% endcontent-ref %}

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)

![](/files/-MXg-np5_ZF3xn7QnyW_)

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

![](/files/-MXg-u89CVpT-08ELpcw)

3\. Now you have access to **current\_id** state:

![](/files/-MXg-zGXt7T9CnhrbsPK)

### **➡️ 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.

![](/files/-MXg02tuqhFXsDFl_SQk)

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

![](/files/-MXg08Vu5hs60_pRpNQ8)

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.