[SOLVED] How to move a Header from middle to top of page when scrolling down?

[donm]

Hi,

I want to have a header that includes buttons, search bar etc. to be positioned in the middle/bottom of the initial page view, and fixed at the top of page when scrolling down.

The header should float up with the page and stay at the top once the scrolling has “passed” the header’s initial position.

Similar to medium.com (attached image), the bar containing Home, Popular… etc. floats to the top of page when scrolling down - replacing the Medium logo.

Any advice on this?

Many thanks!

[sridharan.s]

2 Ideas:

• Use custom Javascript (my recommendation)
• Use 2 different elements that look identical for the header. One starts in the middle of the page and hides when user scrolls to say, 150 pixels. Other header is sticky header and floats at the top. It’s hidden until user scrolls 150px. This works, but can be a bit choppy. We had done this, but removed it from our app because, for us, being choppy occasionally wasn’t worth the benefit of making the header sticky after the user scrolls.

[donm]

Thank you! Got it to work using events and actions.

[donm]

Thanks again for the solution. I do have a follow up:

Since I have input fields in the headers, what the user inputs in one of the headers will not be visible in the other duplicated header. Is there a way to duplicate/mirror what has been written in one of the input fields without having to store that input?

Ex: User types 12345 in input of fixed header --> 12345 gets mirrored in input of floating header, and vice versa.

There is Display Data action in Events and Actions but the Floating Group (Header) has it’s own workflow that isn’t necessarily connected to my main workflow.

Any advice would be appreciated - Thanks!

[sridharan.s]

2 ideas for this as well:

• You could set the field to auto-bind to the database, so anytime the user changes the value it auto-updates in the database.
• Alternatively, you could set a workflow to run anytime the field’s value is changed and have it set the hidden header’s default value to be the same as the one the user input in the other field.

[donm]

Thanks - got this to work on one of my input fields by using alternative 2. However, I run into issues when I want to do this for all input fields.

Let me describe this for you:
I have a Type called “Search”. This type has several fields to it. One of them is formatted as number and another one is as text.

• I have two Headers (float and fixed) where each has input field (number) and dropdown (static text).

• I have grouped these input fields of each Header and labeled as “Search Bar Float/Fixed”.

If I define the Type of content of the Headers to number, I get the duplication of the number input field to work but not of the dropdown text.

If I define the Type of content of the Headers to Search (my Type), to be able to duplicate both input fields, the workflow (specifically Data to display) just keeps looping “expecting “Search” but now is number” when doing this for the number input.

What should Type of content be defined as if I want to duplicate the values of both input types?

Thanks again!

[sridharan.s]

Did you try setting a different workflow to run for each field you want to keep in sync between the two views?

[donm]

Yes - one event and action for each field.

The problem still lies in that Header I have defined as either number/text to get it to work with either field, while the Type of content should be “Search” which is my Type and is composed of both number field and text field. Setting Type of content to “Search” doesn’t make the parameter “Data to display” work.

[sridharan.s]

If I’m understanding you correctly, then yeah, there are a variety of solutions for that. The one I use is to use an input field for the search field and display the results within a repeating group (i.e., create my own search field instead of using Bubble’s default one). This gives me more flexibility and power.

If you search the forums, you’ll find other ideas too.

Best of luck!
Scott

[xtechaus]

how? I’m also wondering how to do this.