(Not solved) Active horizontal menu item Repeating group

Need help
1

I tried to Change Navigation Active Class on Page Scroll.
Currently i Have RG categories nested with RG products and also have floating group with RG categories as a horizontal menu. What logic should i use to Change Navigation Active Button at horizontal menu on Page Scroll?

image
image1902Ă—1148 223 KB

image
image1902Ă—1148 255 KB

2

image
image1902Ă—1148 207 KB

here is Workflow for Button in Repeating group which stands for horizontal menu
it scrolls to the Current cell’s Category in Repeating group Category:
image
image1902Ă—1148 245 KB

Now, i want to change menu’s cat state when page scrolls and menu’s cat state should get Category parametr from Repeating group Category which is visible for User

Example of what i want to achieve: https://youtu.be/ASJN9xKNsRM

4

Based on what is seen on the video I think you want to be able to change the state of groups in the header horizontal rg.

You can consider using conditional on those groups here (setting the number of pixels between the top and current page scroll position) to act as the trigger):

image

Current page scrolling position

5

yeah, i want to use a conditional but don’t know the logical structure

Bubble should sent Current visible Cell to the main’s cat variable everytime, but how do i realize this?

6

Stack everything vertically and use each groups’ Y coordinate

7

Please, can you explain more info about that?

8

Several way to do this.

One example:

  • 3 vertically stacked groups of assorted colors for illustration purposes.
  • Use each of their Y values with their current page scrolling position condition to set further styling or something else to continue further with logic building…

image
image1656Ă—882 33.9 KB

9

i can’t see solution there because i have nested Repeating group with Categories and Products
I can iterate this list by calculating each cell’s PX height but can’t control this value from outside of RG

10

One way to do this within an rg would be a less-performant way … which would involve the dB.

Add a number field to the rg’s thing and use the action “scroll to entry”

11

Scroll to entry works fine on horizontal RG menu and it is not solution for autoscrolling

u wrote about TOP and Bottom Pixel and now i am working on it

So, i want to store in each Category - 2 fields:

  • Top and Bottom

First item of Categories should store:
Top:0
Bottom: Categories - Product: count * 116 pixels(RG product height) + 92 pixels (RG categories height)

After doing this, i will try to work with another categories.
I have field which is called Sort_number which stores Index of Categories in Repeating group. Repeating group shows data sorted by this Sort_number

1 Like
12

now i store the
Top - 0
and Bottom - N pixels
of the first item in categories sorted by Sort_number by using ListShifter

then i have problem with storing data on another categories
I should use this formula but don’t know how to realize that
Top: Bottom value of previous item
Bottom: Current Item Product count * 116 + 92 + Bottom value of previous item

Can someone help how to realize this logic with ListShifter?

13

Solved! Thanks cmarchan for you idea of storing Top and Bottom. You are great!

1 Like
14

it is working now but now, i have another issue with my Horizontal floating menu.
It is not autoscrolls, any idea how to fix that?
15

It is an RG at the end of the day. I am sure if you grind it following a somewhat similar logic you will pull it off :+1:

16

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