Setting up conditions with Window.Y scroll

Hi, I’m trying to understand how to use the scroll variable to establish various interaction patterns. For example, I’m trying to get the button in this sticky footer to turn to an “enabled” state once I hit the bottom of the scroll.

https://ma8ib6.axshare.com/
(I can’t get it to show the enabled button state when hitting the bottom :frowning:)

In addition, I’m also wondering how you can create interactions based on how far down the page you’ve scrolled. Is it a variable, or do I need to create an invisible object that triggers the “show?” For example, if I scroll down to a certain section of the page, then the Table of Contents in the Header highlights or bolds the relevant section.

If you want an action to happen when the user scrolls (the event) then you put what happens (the actions) on that event. If those actions should only happen in certain circumstances (conditions) then you need to add those conditions to your action that are on the event.

The specifics will depend on specifically what you want to do. Do you want a button to work only when they’re at a certain scroll amount? Then you can add a condition to the button’s OnClick event that checks the value of [[Window.scrollY]]. Do you want to the button to work when they’ve reached a certain amount at least once before, but not dependent on where they’re scrolled to when the click it? THen set a variable when they reach that point and then check that variable later.

Right…so I’ve been trying that with the variables but I have no idea why it isn’t working. I used Window.Y and have been trying my best to get my button to change from “disabled” state to “active” and none of it has worked. Can you be a little more descriptive as to how I should approach this? I’ve been struggling for the last few days to make this happen.

Hi Jtina -

It’s a bit hard to tell from looking at the generated prototype what logic you are trying to use to trigger enabling the button. But, my guess is that you aren’t accounting for the fact that Window.scrollY only accounts for where the top of the screen is, not what’s displaying at the bottom. I’m guessing that based on the fact that your progress indicator never hits 100%. To find what’s actually visible you have to add in the window’s height to the scroll.

I put together a quick sample to show the logic I think you need. There are, of course, other ways to do this, but I hope this will help you make related logic changes in your file. I added a few display fields in my sample that show the current scrollY value, the height of the window, the resulting y value that’s visible and the y location of the end of the text. These are purely demonstrative to show what’s going on.

Then, to make the button enable, I have an OnWindowScroll event that checks if the Window.scrollY + Window.height is greater than or equal to the y location of the end of the text (using a local variable assigned to the text widget - calculated by using the widget.y + widget.height). If that’s true, I enable the button. I’m assuming that once the user scrolls to that point, the button should continue to be enabled. So we don’t need do anything to disable the button.

Take a look at the attached - you may have to tweak some things to get it to work depending on how you actually implemented things in your prototype, but this hopefully shows you the logic in a way you can re-use.

enableButtonOnScroll.rp (65.7 KB)

Note that the OnPageLoad and the second OnWindowScrollEvent aren’t necessary for what you’re trying to accomplish - they just set the values on the informational fields i put in.

Holler if I can be of assistance or if I can answer any questions.

4 Likes

Hey, thanks for your file! Really useful