Header group sliding

Showcase
1

Header (group, floating group or some other element) can be hidden when the user scrolls down the page with checking Current page scrolling position and setting the Visible property accordingly. Here’s how to do this smoothly, so that header slowly slides up, and then down again when user scrolls back:

  1. Firstly Expose the option to add an ID attribute to HTML elements under Settings | General appearance of the application
  2. For the element in question, set its ID Attribute (bellow on the properties box)
  3. Add HTML element to the page, set it’s code to:

image
image859×388 10.5 KB

myFloatingGroup is the ID attribute of the element. The property style.top under if else with the number -113px is the number of pixels that the element should slide - this is usually its height. The numbers 2 in properties document.body.scrollTop and document.documentElement.scrollTop are the amounts of scrolling to make the element slide.

1 Like
Two silly questions
2

I think you can also do it through the “transitions” tab :slight_smile: I guess it’d be easier and faster

Levon Terteryan
Founder @ Zeroqode & Bubblewits
zeroqode-for-web-160x120
Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

3

How exactly…?

4

Levon Terteryan
Founder @ Zeroqode & Bubblewits
zeroqode-for-web-160x120
Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

5

Yes, I went over and over these transitions and there is no transition to move (slide) an element. If you found it, please share.

There are other discussions about that on the forum (like this one). I haven’t tried @jarrad MoveIt or CSS plugin yet, though.

1 Like
6

I got some weird experience with transition and iOS, a 1 inch white header at the top.

7

… and I just found the transitions already implemented in Bubble, but somewhere else than I thought would be :smile:

They are hiding in Element actions | Animate, Transition SlideUpBigOut and Transition SlideDownBigIn are just the right thing.

@JohnMark, I suggest you use this ‘actions’ approach. With javascript you never know how various browsers are behaving.

1 Like
8

@eftomi, how did you trigger the animations based on the user scrolling up/down? I haven’t found a way to do that with Current scrolling position.