# Best way to do a scrollspy?

**URL:** <https://community.weweb.io/t/best-way-to-do-a-scrollspy/19740>\
**Category:** Ask us anything\
**Created:** [August 21, 2025, 2:57pm UTC](https://community.weweb.io/t/best-way-to-do-a-scrollspy/19740 "2025-08-21T14:57:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pedro\_vitor](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@pedro\_vitor](https://community.weweb.io/u/pedro_vitor)\
**Post date:** [August 21, 2025, 2:57pm UTC](https://community.weweb.io/t/best-way-to-do-a-scrollspy/19740/1 "2025-08-21T14:57:58Z")

</div>

### I have this sidebar and I would like to know what would be the best way for me to do a scrollspy so that when I am on each topic it is colored.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/60ed4d075c20e35f26fc046e2077bf7b6f18d14e.png)

---

<div class="post-metadata">

**Author:** ![Agustin\_Carozo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/agustin_carozo/32/13231_2.png) [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)\
**Post date:** [August 21, 2025, 5:51pm UTC](https://community.weweb.io/t/best-way-to-do-a-scrollspy/19740/2 "2025-08-21T17:51:32Z")

</div>

Hi Pedro 👋

You mean that you are trying to highlight each item according to the scroll position of the screen?

---

<div class="post-metadata">

**Author:** ![pedro\_vitor](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@pedro\_vitor](https://community.weweb.io/u/pedro_vitor)\
**Post date:** [August 21, 2025, 6:59pm UTC](https://community.weweb.io/t/best-way-to-do-a-scrollspy/19740/3 "2025-08-21T18:59:53Z")

</div>

Yes, i would like to highlight them.

---

<div class="post-metadata">

**Author:** ![jefeOliveira](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jefeoliveira/32/13256_2.png) [@jefeOliveira](https://community.weweb.io/u/jefeOliveira)\
**Post date:** [August 21, 2025, 7:20pm UTC](https://community.weweb.io/t/best-way-to-do-a-scrollspy/19740/4 "2025-08-21T19:20:31Z")

</div>

maybe use states, and as a conditional for each state add a anchor, or height value