Looking for a bit of specific help on changing the state of a navigation component. I’ve attached the file and you can see that the side navigation component functions as intended but I want to add another feature to it.
This would involve each of the navigation menu items changing state when the user was in that section of the page. Essntially the menu item would change colour when the user scrolled to a certain part of the page. I’ve used this functionality already for the navigation component but can’t quite figure out the second step.
Hey Pete, you can use the [[Window.ScrollY]] property on the “Window Scrolled” page event along with the “Selected” widget style for each of your headers.
I’ve attached a simple example that illustrates this behavior. I placed three rectangles where your content can go. Then, I put three headers under a dynamic panel and pinned it, and I also added the selected widget style on the Interactions pane for each header which sets the font color to red. Now, if you go to the Page interactions, you see that I put several conditions that analyze how far the page was scrolled, and if it’s more than at the bottom of each part, the selected style is applied to the next header. I hope this helps! ScrollY_Example.rp (48.7 KB)
Could you possibly help me out with one more thing? Do you know if you can add a condition that looks for between two values. For example, if you are scrolling down a page and are between 100 y and 200 y on a page then perform this action? None of the conditions seem to offer a between or range option.
Hi Pete, you will need to use the logical “AND” (Match All) in the condition builder on the “Window Scrolled” event to evaluate several conditions. It should look the following way: