# CSS Sticky Component How to

**URL:** https://community.glideapps.com/t/css-sticky-component-how-to/52172
**Category:** Ask for Help
**Created:** [October 21, 2022, 1:16am UTC](https://community.glideapps.com/t/css-sticky-component-how-to/52172 "2022-10-21T01:16:39Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)
#### Post date: [October 21, 2022, 1:16am UTC](https://community.glideapps.com/t/css-sticky-component-how-to/52172/1 "2022-10-21T01:16:39Z")

</div>

In Apps, how would one go about making the top 2, 3, or 4 components ‘sticky’

I found this and it works well for the first component but when I try to add another richtext with nth type to ‘2’ (on an action text component) it doesn’t work.

> [@Visualize links on video player](https://community.glideapps.com/t/visualize-links-on-video-player/46804/3):
>
> As for keeping the video visible while you scroll through the list, you’ll need some CSS to keep that component sticky. Something like this.

Thanks in advance.

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [October 21, 2022, 5:50am UTC](https://community.glideapps.com/t/css-sticky-component-how-to/52172/2 "2022-10-21T05:50:31Z")

</div>

Hi Eric, you could try setting the top and/or z-index values.

---

<div class="post-metadata">

### Author: ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)
#### Post date: [October 21, 2022, 6:08am UTC](https://community.glideapps.com/t/css-sticky-component-how-to/52172/3 "2022-10-21T06:08:55Z")

</div>

I tried to get it to work with no success. How would you suggest I alter this CSS to make all of the top 4 components ‘sticky’ Will I need 4 rich text components? Thanks again

```auto
<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) {
    overflow-x: scroll;
    white-space: nowrap;
}

div[id*='screenScrollView'] > div > :nth-of-type(1)::-webkit-scrollbar {
display: none;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) {
position: -webkit-sticky;
position: sticky;
top: 0;
background: transparent;
z-index: 3;
}

```

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [October 21, 2022, 6:20am UTC](https://community.glideapps.com/t/css-sticky-component-how-to/52172/4 "2022-10-21T06:20:29Z")

</div>

Yes, you need to create four rich texts to set each component. Each component requires a different target CSS class and a different top value.  
Or if you want the second component to overwrite the first component then you can use the same top value but a different z-index.  
Nb: Change the nth-of-type (n) according to the order of your choice of components.

 ![Screenshot 2022-10-21 133034](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/0/f02731cadd794e675480731913789a59d98e5378.png)

 ![Screenshot 2022-10-21 133114](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/2/e292b63a1fe887a87f42e0b9487cf2125543ffef.png)

⚠ Be careful if you have hidden components or components like float buttons above them, then your nth-of-type could be missed.