How to acheive this?

Need help
1

I have a top floating stripe with an non-white background. (1600 pixel screen width) In front of it, I have a top floating group with some text, buttons etc. with a transparent background (full width i.e. 1200 pixel).

When I scroll down the elements in rest of page below scroll over / under the floating group. The only way i can avoid this is to set an opaque background on the floating group. But this leads to bad UI as 1200px width will be opaque and rest of width will be different color of the stripe.

See screenshots below. How do I avoid this effect ?

Top of page before scroll:

before scroll.png1657Ă—400 11.2 KB

Top of page after scroll:

after scroll.png1597Ă—400 9.96 KB

2

https://buildingonbubble.com/block/page-header-that-disappears-1458802321275x227848563457523700

3

Not sure how this is helpful ? I can already do that.
The issue is I want header to act floating, but without scrolling elements visible as going over / under it due to a transparent background.

4

but why is it a transparent background if you don’t want things to be seen through it???

5

Right now its a grey stripe behind it but i want to replace it with a image. If i dont have transparent background, part of image wont be visible. Note that this is normal bubble builder and not responsive builder.

6

then bring the header to the front, the image behind that and the page behind that. As it scrolls, the page should go behind the image, no?

7

The image should stretch across the page so has to be a stripe. And the page never goes behind the stripe. That’s the core of the problem :frowning:

8

That is strange, can you re-create the problem on the forum app so we can see what’s happening.

  • Be sure that the stripe is not transparent.
  • Check if the draw order (bring to front/back) makes it go away
  • If you made the “underneath” element a button, would the button be clickable?
  • Try creating a new floating group and see if the problem persists
  • Is the floating group part of a reusable element?

Maybe the draw order is overriding the stripe and causing the elements to visually overlap.

1 Like
9
1 Like
10

Maybe you could make the image in two parts… one on the stripe and another on the floating group… shouldn’t be too difficult to cut them to pixel perfect size…

1 Like
11

That’s a solution but definitely not a great practice. I’m wondering if there is a more conventional solution that other bubblers have used

12

The floating group bar has no background color so it cant “hide” anything as such. Anything that moves underneath it will show.

If you make the stripe a non floating stripe and give the floating group bar a white background color you can hide the text scrolling underneath it BUT unfortunately you loose the image at the top.

Unfortunately it seems that the stripe is always at the bottom of everything else. I’m sitting with the same challenge.
Have a look at your forum app example and see what I did in my own app, but it’s not always possible especially with bigger elements like a RG

13

:frowning:
I decided to learn responsive design and switch that page to responsive instead. May be a bit challenging since I dont have prior coding experience but should be able to manage.

1 Like
14

I’m doing the same but I’m waiting for the responsive design to come out of Beta. For the time being I sacrificed having the stripe with the image at the top the whole time and made my floating bar have a white background when the page is at the desired page scroll.

This hides anything that moves underneath it. Maybe somebody has a better plan.

15

Looking at the link you gave us - I don’t think it’s anything wrong on your end. I think it’s a bug on Bubbles end.
Hopefully one of the Bubble staff will see this and fix it.

16

Looks like you were on the right lines with making the text disappear based on Current Scroll Position.

It is fiddly, but should work.

17

You can start using the responsive engine (in fact the more people use it, the faster it’s out of beta). We use it for our own website bubble.is.

2 Likes