Conditional logic help

#1

Hi,

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.

For infomation it should function like this website: https://www.st-andrews.ac.uk/subjects/earth-environmental-sciences/earth-sciences-mgeol/

Any support greatly appreciated.

Thanks,
Pete
PGT programme page.rp (158.5 KB)

#2

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! :slight_smile: ScrollY_Example.rp (48.7 KB)

#3

Hi! Thanks so much for your help. This is great and does what I wanted it to do.

#4

Hi Tanya,

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.

Thanks,
Pete

scroll|690x291

#5

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:

51%20PM
Screen Shot 2024-02-09 at 2.13.51 PM.png1073×479 50.8 KB

Here something happens if [[Window.scrollY]]>500 and [[Window.scrollY]]>=1000.
I hope this helps! :slight_smile:

#6

Yes! This really helps. Thanks again for your help.

closed #7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.