# Make floating stripe appear when scrolling **URL:** \ **Category:** Need help\ **Created:** [November 3, 2015, 7:49pm UTC](https://forum.bubble.io/t/make-floating-stripe-appear-when-scrolling/525 "2015-11-03T19:49:30Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Scott](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/scott/32/565_2.png) [@Scott](https://forum.bubble.io/u/Scott)\ **Post date:** [November 3, 2015, 7:49pm UTC](https://forum.bubble.io/t/make-floating-stripe-appear-when-scrolling/525/1 "2015-11-03T19:49:30Z")
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. ---
**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\ **Post date:** [November 4, 2015, 11:39pm UTC](https://forum.bubble.io/t/make-floating-stripe-appear-when-scrolling/525/2 "2015-11-04T23:39:46Z")
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. ---
**Author:** ![Scott](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/scott/32/565_2.png) [@Scott](https://forum.bubble.io/u/Scott)\ **Post date:** [November 4, 2015, 11:55pm UTC](https://forum.bubble.io/t/make-floating-stripe-appear-when-scrolling/525/3 "2015-11-04T23:55:57Z")
The example I’m looking at is the home page of [http://airdev.co/](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. ---
**Author:** ![vlad](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vlad/32/228680_2.png) [@vlad](https://forum.bubble.io/u/vlad)\ **Post date:** [November 4, 2015, 11:56pm UTC](https://forum.bubble.io/t/make-floating-stripe-appear-when-scrolling/525/4 "2015-11-04T23:56:52Z")
Check out [airdev.co](http://airdev.co), it’s hacky but this is how we accomplished it: 1. Create a floating stripe on the top with a floating group that has all the content you want in it 2. 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. 3. 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 ---
**Author:** ![Scott](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/scott/32/565_2.png) [@Scott](https://forum.bubble.io/u/Scott)\ **Post date:** [November 5, 2015, 12:09am UTC](https://forum.bubble.io/t/make-floating-stripe-appear-when-scrolling/525/5 "2015-11-05T00:09:55Z")
Thank you for taking the time to describe how you accomplished that! I’ll report back on my attempt to replicate it. ---
**Author:** ![vlad](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vlad/32/228680_2.png) [@vlad](https://forum.bubble.io/u/vlad)\ **Post date:** [November 5, 2015, 1:38am UTC](https://forum.bubble.io/t/make-floating-stripe-appear-when-scrolling/525/6 "2015-11-05T01:38:41Z")
sounds good! ---
**Author:** ![mattrrison](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mattrrison](https://forum.bubble.io/u/mattrrison)\ **Post date:** [February 11, 2016, 7:34pm UTC](https://forum.bubble.io/t/make-floating-stripe-appear-when-scrolling/525/7 "2016-02-11T19:34:27Z")
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. ---
**Author:** ![mattrrison](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mattrrison](https://forum.bubble.io/u/mattrrison)\ **Post date:** [March 4, 2016, 2:28pm UTC](https://forum.bubble.io/t/make-floating-stripe-appear-when-scrolling/525/8 "2016-03-04T14:28:34Z")
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. ---
**Author:** ![Scott](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/scott/32/565_2.png) [@Scott](https://forum.bubble.io/u/Scott)\ **Post date:** [March 4, 2016, 6:22pm UTC](https://forum.bubble.io/t/make-floating-stripe-appear-when-scrolling/525/9 "2016-03-04T18:22:23Z")
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. ---
**Author:** ![vlad](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vlad/32/228680_2.png) [@vlad](https://forum.bubble.io/u/vlad)\ **Post date:** [March 6, 2016, 3:22pm UTC](https://forum.bubble.io/t/make-floating-stripe-appear-when-scrolling/525/10 "2016-03-06T15:22:59Z")
@mattrrison @Scott - sorry I missed your responses before. Check this out: > **[Bubble Editor - Forum\_app](https://bubble.io/page?type=page&name=stripe&id=forum_app&tab=tabs-1)** > > Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications. 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 ---
**Author:** ![badarvlog](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/badarvlog/32/110824_2.png) [@badarvlog](https://forum.bubble.io/u/badarvlog)\ **Post date:** [October 29, 2021, 12:39pm UTC](https://forum.bubble.io/t/make-floating-stripe-appear-when-scrolling/525/11 "2021-10-29T12:39:26Z")
How I can get an exact number of pixels of specific element, I have to implement animation on page scroll.