Question: hide floating group when scrolls up the content?

Need help
1

I’m currently developing a service booking mobile app and have encountered a problem. How can I make the top floating group (height 120px) automatically hide when the user scrolls up on the main page content? Additionally, when the user scrolls the main page content back down and reaches the top, the floating group should reappear by sliding down. How can this be achieved? I would appreciate any help!

2

Okay u’ll have to set up a general workflow (Do when condition is true) .

The condition will be;
Run this: every time
Only when: current page scroll position >= Xpx

Worflow action will be;
hide floating group x

Then u’ll reverse it to show when it’s <= Xpx

You can add an **Animate an element * workflow action to achieve;

Additionally, when the user scrolls the main page content back down and reaches the top, the floating group should reappear by sliding down.

1 Like
3

I think he means no matter where the user is on the page, when he scrolls down, the group should disappear. When he scrolls up a minimum amount, show the floating group again.

I don’t think you can do this natively in Bubble, but you could do it with some JavaScript. I’m surprised there’s no plugin that does this already.

1 Like
5

I will give it a try, thank you for the reply!

6

Yeah that’s what I mean, hide the floating group when user scroll the page up

7

This is definitely possible. I can think of a way to do it using native Bubble, but it will be messy. You can write some JavaScript and putting it inside of the <head> of the page but, to be fully transparent, this will only be slightly less messy. I think the best options in your case are:

  1. Create a small custom plugin
  2. Think about using an alternative to the Floating group

About the second point: a focus group might work for you. Attach it to certain elements on the page, and make them visible once the are in view. Personally, I’d just create a plugin (but I have a lot of plugin & coding experience). If you need help, I can offer you a free 30 minute welcome call that you can book here if you’d like.

Good luck :slight_smile: !

1 Like
8

By the way, what you’re actually requesting is how to create a Sticky group. See CSS Sticky. Bubble doesn’t support sticky groups, only fixed groups :frowning:

9

I used this forum thread (post #8 @J805) before to create this effect and then added some animation.

1 Like
10

I will try:)

11

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