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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bubble.digital-bird.com/plugins/scrollspy.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.