How can I make the "Current" state only apply to the category that is visible in the viewport on my menu page in Webflow?

To make the "Current" state only apply to the category that is visible in the viewport on your menu page in Webflow, you can use some custom code and interactions. Here's a step-by-step guide on how to achieve this:

1. Identify the categories: Identify the categories or menu items that you want the "Current" state to apply to. It could be the links in your navigation menu, for example.

2. Create interactions: In Webflow, create a new interaction for each category. For this example, let's call the interaction "Current State".

3. Set initial state: Set the initial state of each category to a non-current state, such as "Normal" or "Default".

4. Add custom code: Go to the project settings in Webflow and navigate to the custom code section. Inside the 'Head Code' section, add the following JavaScript code:

<script>  window.addEventListener("scroll", function() {    var sections = document.querySelectorAll(".your-category-selector");    var current;      for (var i = 0; i < sections.length; i++) {      var boundingRect = sections[i].getBoundingClientRect();        if (        boundingRect.top <= 0 &&        boundingRect.bottom >= 0 &&        boundingRect.top <= (window.innerHeight || document.documentElement.clientHeight) &&        boundingRect.bottom >= (window.innerHeight || document.documentElement.clientHeight)      ) {        current = sections[i];      }    }      for (var i = 0; i < sections.length; i++) {      sections[i].classList.remove("current-state-class");    }      if (current) {      current.classList.add("current-state-class");    }  });</script>

Replace .your-category-selector with the appropriate class name or ID of your category elements. This code will listen to the scroll event and apply the "current-state-class" to the category that is currently visible in the viewport.

1. Apply custom class: In the Webflow Designer, select each category element and assign the "current-state-class" to them.

2. Style the current state: Style the "current-state-class" with the desired visual changes, such as changing the color or adding an underline to indicate the current state.

3. Preview and publish: Preview your site and test the functionality. If everything looks and works as expected, publish your site and enjoy the "Current" state functioning for the visible category in the viewport.

With these steps, you can implement the "Current" state to only apply to the category that is visible in the viewport on your menu page in Webflow.