# CSS for a sticky choice component

**URL:** https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111
**Category:** Ask for Help
**Tags:** custom-code
**Created:** [December 30, 2023, 10:23am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111 "2023-12-30T10:23:00Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Martin\_B](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/martin_b/32/74360_2.png) [@Martin\_B](https://community.glideapps.com/u/Martin_B)
#### Post date: [December 30, 2023, 10:23am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/1 "2023-12-30T10:23:00Z")

</div>

Hello Glide friends,

First of all i wish you a beautiful year full of innovations and new projects!

Anyone knows how to **keep the choice component on top of screen? like a sticky menu/filter.** If it’s impossible with this component, maybe with a simple card horiz list used as menu/filter?

That would be super useful for beautiful UI.

Btw, i’m looking forward to showcase some of my work that found product market-fit with you here soon!

Thanks in advance,

Martin 🔗

> **[From idea to start-up in a month?](https://founders-copilot.com)**
>
> We secure your idea, build your app and provide every service you need to succeed

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 30, 2023, 10:29am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/2 "2023-12-30T10:29:09Z")

</div>

If you use Classic App, it is easy… with new Apps (pages)… you need to convert whole page to html rich component

---

<div class="post-metadata">

### Author: ![Martin\_B](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/martin_b/32/74360_2.png) [@Martin\_B](https://community.glideapps.com/u/Martin_B)
#### Post date: [December 30, 2023, 10:32am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/3 "2023-12-30T10:32:28Z")

</div>

Thanks Uzo.  
Even if you put it inside a container component? with css itself?  
Just a random idea

Btw, i almost worked with you for some apps last year, finally we chose someone else and got scammed. 😅 The guy was just benefiting from my business plan or something… Pretending he was making slow progress.

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 30, 2023, 10:34am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/4 "2023-12-30T10:34:09Z")

</div>

Ohhh!!!.. always be aware of scammers… google them before make deposit!  
Are you using classic or pages?

---

<div class="post-metadata">

### Author: ![Martin\_B](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/martin_b/32/74360_2.png) [@Martin\_B](https://community.glideapps.com/u/Martin_B)
#### Post date: [December 30, 2023, 10:39am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/5 "2023-12-30T10:39:58Z")

</div>

Yep… Was a naive move.

I use 100% pages for my current projects. (Waiting for some features of classic to be re-added to pages…)

I have 2 apps on classics still… but as we cant duplicate them (use to do that to “save”).

But i admit creating with pages is so much faster now than classic… (the actions recopying nightmare)

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 30, 2023, 10:41am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/6 "2023-12-30T10:41:21Z")

</div>

Hahaha… no way… classic aps are the best product in the world!!!

So bad that Glide abandon it, instead improve it… but still better than new apps

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [December 30, 2023, 10:41am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/7 "2023-12-30T10:41:33Z")

</div>

Put it in a container and apply the following CSS to the container:

```auto
sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 999;
  margin-top: -90px;
}

```

(requires Business plan or higher)

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 30, 2023, 10:43am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/8 "2023-12-30T10:43:01Z")

</div>

And there you go…@daren is in the house… my solutions are for free plans 😉

---

<div class="post-metadata">

### Author: ![Martin\_B](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/martin_b/32/74360_2.png) [@Martin\_B](https://community.glideapps.com/u/Martin_B)
#### Post date: [December 30, 2023, 10:47am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/9 "2023-12-30T10:47:52Z")

</div>

Hey guys,

Im not free plan for so long im getting upset soon 😛  
haha

Btw, i think it should be tagged on the profile here… business badge etc… for sales purposes as well…

Thanks Darren 🚀  
Z-index 999 🤣

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 30, 2023, 10:49am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/10 "2023-12-30T10:49:14Z")

</div>

What do you mean?

---

<div class="post-metadata">

### Author: ![Martin\_B](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/martin_b/32/74360_2.png) [@Martin\_B](https://community.glideapps.com/u/Martin_B)
#### Post date: [December 30, 2023, 10:50am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/11 "2023-12-30T10:50:45Z")

</div>

Your current membership could appear below the pseudonyme… here in the forum.  
Starter/pro/business

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 30, 2023, 10:51am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/12 "2023-12-30T10:51:56Z")

</div>

I’m lost… what do you mean ? 😉

Your app subscription should show in Glide forum?

---

<div class="post-metadata">

### Author: ![Martin\_B](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/martin_b/32/74360_2.png) [@Martin\_B](https://community.glideapps.com/u/Martin_B)
#### Post date: [December 30, 2023, 10:54am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/13 "2023-12-30T10:54:13Z")

</div>

Yep…  
Sorry for my english

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 30, 2023, 10:55am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/14 "2023-12-30T10:55:44Z")

</div>

Lol… no way… hahaha… which app glide will look to give a badges? Imposible…  
In Glide you can have many teams… with many apss inside… no mentions multiple accounts lol

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [December 30, 2023, 11:10am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/15 "2023-12-30T11:10:12Z")

</div>

I just finished integration to set cookies in Glide… lol. Long time request from my customers!

 ![Screenshot_20231230_064858_Messenger](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/f/1fa40d3b7362197178594703bd0e6259a4bf17cd.jpeg)

---

<div class="post-metadata">

### Author: ![Netinho\_Sillva](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/netinho_sillva/32/40102_2.png) [@Netinho\_Sillva](https://community.glideapps.com/u/Netinho_Sillva)
#### Post date: [January 4, 2024, 1:29pm UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/16 "2024-01-04T13:29:52Z")

</div>

Sou novo aqui, poderia me ajudar como fazer isso?

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [January 4, 2024, 2:25pm UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/17 "2024-01-04T14:25:42Z")

</div>

Yes, but this is complicated and only for my paid customers:

> [@file\_folder Set and read cookies or local storage from the Glide App](https://community.glideapps.com/t/set-and-read-cookies-or-local-storage-from-the-glide-app/69201):
>
> So… My new project is to set up cookies or local storage from the Glide App… I wonder if anybody has come up with a better solution…? I used W3 as my interface for a Google Web App… and it works… please try it… Please set up your browser storage and read it on the next refresh… you can see that it stays when you inspect the page… and the Glide component can read it… I tested it on many devices and browsers… and it works… here is the link to my Glide a…

---

<div class="post-metadata">

### Author: ![Bungchow\_IDEApps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bungchow_ideapps/32/49062_2.png) [@Bungchow\_IDEApps](https://community.glideapps.com/u/Bungchow_IDEApps)
#### Post date: [January 6, 2024, 3:04am UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/18 "2024-01-06T03:04:42Z")

</div>

Any CSS to remove the line when scrolling down?

Before scrolling down:

 ![Screenshot 2024-01-06 095152](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/8/88966e5a41719d56a94204588b33a9bdddcd35dd.jpeg)

After scrolling down:

 ![Screenshot 2024-01-06 095247](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/9/69dcae9e0b9e9e11df50897dc3640cda190f7030.png)

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 6, 2024, 10:40pm UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/19 "2024-01-06T22:40:21Z")

</div>

I assume you would need to use JS Event Listener to get a ScrollY position, so that won’t work here.

The closest alternative might be trying to remove that line altogether, not depending on the position, but I’m not sure that’s what you want.

---

<div class="post-metadata">

### Author: ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)
#### Post date: [January 13, 2024, 10:40pm UTC](https://community.glideapps.com/t/css-for-a-sticky-choice-component/69111/20 "2024-01-13T22:40:50Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
