How can I have a floating stripe only appear once the scroll position has reached an arbitrary threshold? Using a floating group by itself won’t work as I want the background color to span the width of the window.
Not sure we support this yet. You can have a group that only appears after the scrolling position exceeds a certain number of pixels, but at the stripe level it’s not currently possible I think.
The example I’m looking at is the home page of http://airdev.co/ I believe they are using Bubble for the site and they seem to have that functionality. What I’m unsure is if it can be done with Bubble’s feature set or if it required any special HTML. From inspection, the stripe’s height changes to 1 when you scroll down.
Check out airdev.co, it’s hacky but this is how we accomplished it:
- Create a floating stripe on the top with a floating group that has all the content you want in it
- Put an empty group on top of the floating stripe (with the height equal to the stripe height) that is set to collapse when hidden. Make it hidden as a default and show it when the current scroll position reaches a certain number. Also show the floating group at the same time.
- Create another collapsible group underneath that is the same height as the group in step 2 but that is visible by default and becomes invisible when the group in step 2 becomes visible - the purpose of this step is to make sure that the content is properly aligned when the stripe appears - making the same amount of space disappear as the amount of space that appeared
4 Likes
Thank you for taking the time to describe how you accomplished that! I’ll report back on my attempt to replicate it.
sounds good!
Vlad,
I wonder if you could provide any more details about how you achieved this?
I’ve tried your method numerous times in numerous different ways but cannot get the stripe at the top to hide when the page first loads, even though I’ve done as you said step by step.
Scott, were you able to recreate what @vlad has described above? I might be missing something, but I’m struggling to get the stripe at the top of the page to be hidden when the page first loads.
I’ve placed a collapsible group over the top of the stripe which is set to hidden, but the stripe is still appearing.
Any help would be greatly appreciated.
1 Like
Unfortunately, I haven’t had success in implementing this. I’ve since then focused on other aspects and removed the need altogether. It would have been neat to have it though.
@mattrrison @Scott - sorry I missed your responses before. Check this out:
One intricacy that I didn’t realize before is that the collapsing group has to be 1 pixel shorter than the stripe for some reason. Also in this case I didn’t create the second collapsing group (step 3 above) but you may need to depending on how things end up looking
1 Like
How I can get an exact number of pixels of specific element, I have to implement animation on page scroll.