# Fixed effect with Css

**URL:** <https://community.glideapps.com/t/fixed-effect-with-css/41614>\
**Category:** Ask for Help\
**Created:** [May 4, 2022, 4:12pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614 "2022-05-04T16:12:09Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![BDN\_Jacopo\_Chiapello](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bdn_jacopo_chiapello/32/40500_2.png) [@BDN\_Jacopo\_Chiapello](https://community.glideapps.com/u/BDN_Jacopo_Chiapello)\
**Post date:** [May 4, 2022, 4:12pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/1 "2022-05-04T16:12:09Z")

</div>

Hi, someone can help me with a fixed position? I have two inline list and i want to fix the first when i scroll from the bottom. What i want to have is to fix the first inline list when the second inline list scroll down.  
The flow can be like the video, start to scroll with glide header animation and when the header change the first inline list go fixed like the end of the video.

[ 

Boze · Glide - 4 May 2022 - Watch Video

  ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/c/6cd72a70df2da750c543804dffb2d442445afa4c.gif) ](https://www.loom.com/share/cb3e3f32cbd54cc0b60c97bb51ccf1e6)

---

<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:** [May 4, 2022, 4:26pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/2 "2022-05-04T16:26:42Z")

</div>

try this:

```auto
<pre><span><style>
div[id*='screenScrollView'] > div > :nth-child(1) {
position:fixed !important;
width:100% !important;
}

```

add a separator under the first list so it will not overlay the second list.

> **[Code BOOK - Desktop](https://code-book-desktop.glideapp.io/full)**
>
> share cool CSS, scripts and links

---

<div class="post-metadata">

**Author:** ![BDN\_Jacopo\_Chiapello](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bdn_jacopo_chiapello/32/40500_2.png) [@BDN\_Jacopo\_Chiapello](https://community.glideapps.com/u/BDN_Jacopo_Chiapello)\
**Post date:** [May 4, 2022, 6:06pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/3 "2022-05-04T18:06:21Z")

</div>

Thanks man!  
It works but when the header go up it fails.  
I have “Pure (dark)” theme.

You can solve this?

 ![photo.jpg](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/2/620d5eb38cab408109697e4232f1d0ab86899c0a.jpeg)

 ![photo(1).jpg](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/2/72dc81b69b1b233de4d24a25f3783f44d5661832.jpeg)

---

<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:** [May 4, 2022, 6:58pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/4 "2022-05-04T18:58:38Z")

</div>

do you need a header? you can turn it off, and let your first inline list be a header

---

<div class="post-metadata">

**Author:** ![BDN\_Jacopo\_Chiapello](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bdn_jacopo_chiapello/32/40500_2.png) [@BDN\_Jacopo\_Chiapello](https://community.glideapps.com/u/BDN_Jacopo_Chiapello)\
**Post date:** [May 4, 2022, 7:10pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/5 "2022-05-04T19:10:55Z")

</div>

yes, unfortunately i Need the Header for the inline search.

---

<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:** [May 4, 2022, 7:11pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/6 "2022-05-04T19:11:42Z")

</div>

add your own search 😉 Click the link to the code book above, you will see how I did search and inline lists

---

<div class="post-metadata">

**Author:** ![BDN\_Jacopo\_Chiapello](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bdn_jacopo_chiapello/32/40500_2.png) [@BDN\_Jacopo\_Chiapello](https://community.glideapps.com/u/BDN_Jacopo_Chiapello)\
**Post date:** [May 4, 2022, 9:02pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/7 "2022-05-04T21:02:04Z")

</div>

This is not user friendly. I think to keep the inline list not fixed if there is no solution.  
Have you other idea? I would keep the header and fix the first list attached to the bottom-header.

---

<div class="post-metadata">

**Author:** ![BDN\_Jacopo\_Chiapello](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bdn_jacopo_chiapello/32/40500_2.png) [@BDN\_Jacopo\_Chiapello](https://community.glideapps.com/u/BDN_Jacopo_Chiapello)\
**Post date:** [May 4, 2022, 9:32pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/8 "2022-05-04T21:32:50Z")

</div>

Are you able to activa first the header animation? I can do the animation instantly and fix the list under the “animated” header.

---

<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:** [May 4, 2022, 9:37pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/9 "2022-05-04T21:37:04Z")

</div>

I don’t know what you mean?

---

<div class="post-metadata">

**Author:** ![BDN\_Jacopo\_Chiapello](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bdn_jacopo_chiapello/32/40500_2.png) [@BDN\_Jacopo\_Chiapello](https://community.glideapps.com/u/BDN_Jacopo_Chiapello)\
**Post date:** [May 4, 2022, 9:41pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/10 "2022-05-04T21:41:46Z")

</div>

If you can delete this animation and start directly with the small header it’s good.  
[  
 ](https://www.loom.com/share/642164ba0b644f2788eb867869bb7f4d)

[Boze · Glide - 4 May 2022 - Watch Video](https://www.loom.com/share/642164ba0b644f2788eb867869bb7f4d)

[  
  ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/a/8ac3770546bfa144ea5e0593df3c81cc717462c3.gif)  
 ](https://www.loom.com/share/642164ba0b644f2788eb867869bb7f4d)

---

<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:** [May 4, 2022, 9:43pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/11 "2022-05-04T21:43:19Z")

</div>

what animation? are you talking about top bar resizing?  
change the theme, that only happens on CHAT themes.

---

<div class="post-metadata">

**Author:** ![BDN\_Jacopo\_Chiapello](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bdn_jacopo_chiapello/32/40500_2.png) [@BDN\_Jacopo\_Chiapello](https://community.glideapps.com/u/BDN_Jacopo_Chiapello)\
**Post date:** [May 4, 2022, 9:57pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/12 "2022-05-04T21:57:37Z")

</div>

Yes, i’m talking about header resizing. I can’t change theme. If i change theme All component change color, from pure black to dark blue and it looks really bad. It’s not possible to resize the header immediatly when i open this tab?

---

<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:** [May 4, 2022, 10:01pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/13 "2022-05-04T22:01:24Z")

</div>

you can CSS any color in your App… just inspect the element and add CSS… or search my Code BOOK for tricks…

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 4, 2022, 10:39pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/14 "2022-05-04T22:39:05Z")

</div>

> [@Freezing certain components](https://community.glideapps.com/t/freezing-certain-components/39993/12):
>
> That is indeed possible using the “sticky” method. \<pre\>\<span\>\<style\> div[id\*='screenScrollView'] \> div \> :nth-of-type(4) { position: -webkit-sticky; position: sticky; top: 0; background: white; z-index: 3; }

---

<div class="post-metadata">

**Author:** ![BDN\_Jacopo\_Chiapello](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bdn_jacopo_chiapello/32/40500_2.png) [@BDN\_Jacopo\_Chiapello](https://community.glideapps.com/u/BDN_Jacopo_Chiapello)\
**Post date:** [May 4, 2022, 10:58pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/15 "2022-05-04T22:58:10Z")

</div>

Thanks Jeff, it works but i have the same problem. it doesn’t fix under the header, more space remain between header and sticked component.

---

<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:** [May 5, 2022, 12:10am UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/16 "2022-05-05T00:10:43Z")

</div>

Can you show in a screenshot what space are you talking about? I think this is a different matter from the topic of this thread.

---

<div class="post-metadata">

**Author:** ![SamWalker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/samwalker/32/64159_2.png) [@SamWalker](https://community.glideapps.com/u/SamWalker)\
**Post date:** [September 17, 2023, 8:07am UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/17 "2023-09-17T08:07:02Z")

</div>

Hi @Jeff_Hager,  
I have the similar problem with the header. It’s shaking/moving/ not sticky when scrolling down-up. How can I make it fixed, sticky, not bouncing when scrolling?  
Thanks 🙏

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [September 17, 2023, 4:53pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/18 "2023-09-17T16:53:42Z")

</div>

Is the shaking something you are observing in the builder? That is usually something you can ignore or fix by changing the zoom level in the browser. The emulator does some weird scaling sometimes, but the published app won’t have the problem.

---

<div class="post-metadata">

**Author:** ![SamWalker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/samwalker/32/64159_2.png) [@SamWalker](https://community.glideapps.com/u/SamWalker)\
**Post date:** [September 17, 2023, 6:20pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/19 "2023-09-17T18:20:42Z")

</div>

In the builder, everything works fine, but when I log in from a browser, the header issue (shaking/bouncing) appears.

A short video showing it in action 👇  
[https://www.canva.com/design/DAFuujeNoZw/2LbozbDz1TotnSOXxMwUaw/watch?utm\_content=DAFuujeNoZw&utm\_campaign=designshare&utm\_medium=link&utm\_source=publishsharelink](https://www.canva.com/design/DAFuujeNoZw/2LbozbDz1TotnSOXxMwUaw/watch?utm_content=DAFuujeNoZw&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [September 17, 2023, 9:00pm UTC](https://community.glideapps.com/t/fixed-effect-with-css/41614/20 "2023-09-17T21:00:36Z")

</div>

Not sure what would cause that.

[Next page](https://community.glideapps.com/t/fixed-effect-with-css/41614.md?page=2)