I am in the process of setting up a page for my app and have come across an issue with elements positioning on-screen after one of the elements’ height collapses. In short, this is the setup i have:
- On the very top of the screen is group A containing a text & a repeating group. Group A is set to collapse once the Current page’s scrolling position is above a certain threshold (currently - if it’s above 50).
- Below the group A is group B consisting of a text and a button. While the group B is positioned exactly below group A (e.g. there’s no space between the groups), the text & the button in group B are kept a certain space away from group A (20px and 8px respectively).
- Finally, below Group B is a Repeating Group which goes beyond the screen’s height (so the user cannot see the whole repeating group when first loading the page).
With this setup, what I want to happen is for user to see all of the content on the screen upon loading (so Groups A, B & Repeating Group). However, if the user decides to scroll down, i want the group A to collapse, leaving only Group B & Repeating Group on screen. However, what happens is that when Group A collapses, Group B moves past the top of the screen, as if the user has scrolled past it - only the very bottom of the text and button are visible. And Repeating Group takes up 99% of the screen.
I have tried changing settings on space between groups & changing group type to floating but so far have not been able to solve the issue. Is there away to make an element stick to the top of the page (Group B in this example) after an element above it collapses?