Workaround for scroll-spy effect with Repeater Nav in Wix Studio

Ask the community
, , , ,
1

Question:
I’m trying to make a CMS-based navigation bar using a repeater in Wix Studio that highlights the active link as the user scrolls through each section on the page. However, .addClass() and .removeClass() do not seem to work inside the repeater’s onItemReady or forEachItem handlers.

Product:
Wix Studio

What are you trying to achieve:
When the user scrolls to a section, the corresponding nav item should get visually highlighted (e.g., using .addClass("activeMenuBtn")) — this is not working.

What have you already tried:

  • I’m using a Repeater (#repeaterButtomNav) connected to a CMS that includes an anchorId field (e.g., dimsumSection, appetizerSection).
  • Each nav item is now a Text element with ID #scrollLink. I previously used a native Button, but switched to text inside a container.
  • I’ve added a class called activeMenuBtn to the text element in the Design panel.
//scroll highlight

$w.onReady(() => {
  $w("#repeaterButtomNav").onItemReady(($item, itemData) => {
    const anchorId = itemData.anchorId;
    const section = $w(`#${anchorId}`); // cms button 

    if (section) {
      section.onViewportEnter(() => {
        $w("#repeaterButtomNav").forEachItem(($repItem, repItemData) => {
          const $target = $repItem("#scrollLink"); // my button id

          if (repItemData.anchorId === anchorId) {
            $target.addClass("activeMenuBtn"); // my button class
          } else {
            $target.removeClass("activeMenuBtn"); 
          }
        });
      });
    }
  });
});

Additional information:
my previous post: Error: scrollTo() Not Working in Wix Studio Repeater with Dynamic Anchor Sections

1 Like
2

I believe you’re missing the .customClassList.

It should also be .add() and .remove(), instead of .addClass() and .removeClass()

So should be:

if(repItemData.anchorId === anchorId) {
  $target.customClassList.add("activeMenuBtn");
} else {
  $target.customClassList.remove("activeMenuBtn");
}
1 Like
3

Thank you for the quick response. It works now!
I also wanted to ask if it’s possible to on click and jump directly to a section, instead of scrolling through the entire page. I kinda like to avoid the long scrolling process.

//mobile nav menu click
$w.onReady(() => {
    $w("#repeaterButtomNav").onItemReady(($item, itemData) => {
        $item("#scrollLink").onClick(() => {
            const anchorId = itemData.anchorId; // matches the updated anchor name in CMS
            const anchorElement = $w(`#${anchorId}`); // Scroll to the section by the updated ID
            if (anchorElement) {
                anchorElement.scrollTo(); // Scroll to the anchor element
            }
        });
    });
});
1 Like
4

Unfortunately it’s not possible at the moment :upside_down_face:

1 Like
5

:thinking:

I thought I’d have a play trying to think outside the box. This is as close as I can get with going straight to the section on click (it collapses other sections above) then once you start scrolling it expands (but expands to section 1 after a while). Close…but not exactly right.

7

It would be a great help if you could show me how to achieve this. It seems like each section is fixed at 100vw, but it still looks nicer than seeing the entire scrolling process. :innocent:

8

Yes I have the sections set to 100vh but it could be set to different heights.
You need to code each button to collapse all the sections above the section you are wanting to show. then code to expand once you scroll.
As I said it sort of works, but is a bit buggy as once you start scrolling as it loads back to the first section, as it is collapsing and expanding sections. not really scrolling to them.

1 Like