Indicator to show vertical positioning on a page

advanced-prototyping

#1

Hi, I am trying to create a navigation feature that will show where a user is on a page. This navigation feature is s a set of circles docked to the side of the screen. As the user scrolls up and down the page, the indicator that relates to the panel that is in frame will light up. Also, the panel heights are dynamic and will change with the content selected.

I have tried this as an onMouseEnter, onClick, and onFocus events but is it not giving me results I want. The real challenge is that the solution needs to be testable on mobile devices. Any suggestions or advice would be appreciated.

Thank you,

SideNavigation.rp (77.1 KB)


#2

Hi Jm1643k!

You can use the OnWindowScroll event for this, along with the [[Window.scrollY]] value that is available through the “fx” button:

So, you can say, if the [[Window.scrollY]] value is less than or equal to the y position of your P0 widget on scroll of the page, then set the “0” widget to selected. Else if the [[Window.scrollY]] value is less than or equal to the y position of your P1 widget, then set the “1” widget to selected, and so forth:

This should also work on a mobile device (I just tested on our iPhone device running iOS 12.1). One thing to note, however, is that the scroll never reaches the y position of your last P5 widget, so the “5” widget will never get set to selected. A solution may be to either set the selected state of the “5” widget to half the y position of the “P4” widget, or add a widget further down the bottom of your project to trigger the last conditional case of reaching the y position of the “P5” widget.

Lmk if you have any questions!

SideNavigation_EDIT.rp (80.1 KB)


#3

I have similar issue. in my case I want to change state of dynamic panel (kiind of slider) when scroli reaches specyfic section of my page. i’ve tried it with this “SideNavigation_EDIT.rp” example, an it works beautifully when I pasted my dp into it. But when I copied content, and inteactions into my project it doesn’t work. No clue why.