Highlight a link based on the scrolling position (relative to a specific element)

Need help
1

Hi guys,

Do you know how I could highlight a link or a text based on the scrolling position (relative to a specific element)

Ex on the following image, I would like the links on the left to highlight when the scrolling position is the referred element on the right.

image
image2498Ă—1568 336 KB

Thanks for helping :slight_smile:

2

@JBG The two elements on the left are fixed and the element on the right is a vertical scroll repeating group, correct? If so, it sounds like you need to get the scroll position of the RG on the right. I’m not sure if that can be done without a plugin. There are plugins to do this but I’m not sure if any of them are free. Here’s one you can take a look at: https://scrollspy.bubbleapps.io/

If by chance the entire page is scrolling (for example if the elements on the left are floating and the user scrolls the entire page to view the list on the right) then you can simply set a conditional on the text you want highlighted based on the page’s scroll position.

3

@alex.esposito.1108 Exactly, the left group is inside a floating group. However, the right group is not a RG but just handwritten groups.

Unfortunately, I don’t know how to set the conditional formatting…

image
image2274Ă—1574 329 KB

4

The current page scroll position is a pixel number - so just work out the min and max pixel range for each text group

1 Like
5

@JBG you’ll need to put a numeric value in there For example:

Current page scrolling position > 100 and Current page scroll position < 400

The above expression would allow you to modify text when the page scroll position is between 100 and 400. You can use the console in the browser’s devtools to get the scroll position by using “window.pageYOffset”. Let me know if you need help with that.

1 Like
6

@alex.esposito.1108 @equibodyapp Your idea seem pretty good, but unfortunately it doesn’t work that much in this case…

  1. Texts length will be variable based on the language (FR > EN text)
  2. Scrolling text could depend on page width.

image
image2866Ă—1298 360 KB

Are you sure there is no way to be based the scrolling position on elements ? :confused:

7

@JBG not that I know of but I’ll let you know if I think of anything. If you can’t find a way to make this work the best solution may be to use a RG on the right side of the page and then use the RG’s active cell index to reference in the conditional statement of the text on the left hand side.

8

You might have to look at a plugin

9

This topic was automatically closed after 70 days. New replies are no longer allowed.