# How to make header transparent initially and then change color when page is scrolled down?

**URL:** <https://community.weweb.io/t/how-to-make-header-transparent-initially-and-then-change-color-when-page-is-scrolled-down/3110>\
**Category:** Ask us anything\
**Tags:** design\
**Created:** [June 19, 2023, 6:28am UTC](https://community.weweb.io/t/how-to-make-header-transparent-initially-and-then-change-color-when-page-is-scrolled-down/3110 "2023-06-19T06:28:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![caio](https://avatars.discourse-cdn.com/v4/letter/c/67e7ee/32.png) [@caio](https://community.weweb.io/u/caio)\
**Post date:** [June 19, 2023, 6:28am UTC](https://community.weweb.io/t/how-to-make-header-transparent-initially-and-then-change-color-when-page-is-scrolled-down/3110/1 "2023-06-19T06:28:11Z")

</div>

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/029fd4aecc16856c5089b8024d4e0b4b2c2ff0ca.jpeg)

so far I can only put it in the sticky position, I would like to know how to change the header color on scrolling

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [June 19, 2023, 12:13pm UTC](https://community.weweb.io/t/how-to-make-header-transparent-initially-and-then-change-color-when-page-is-scrolled-down/3110/2 "2023-06-19T12:13:47Z")

</div>

This would probably require some custom JavaScript where you look at the distance from the top or something similar, see for example

> <https://stackoverflow.com/questions/23706003/changing-nav-bar-color-after-scrolling>

for more complex animations and scroll triggered animations I reccomend looking into GSAP, but it is a big gun so use wisely 🙂

---

<div class="post-metadata">

**Author:** ![caio](https://avatars.discourse-cdn.com/v4/letter/c/67e7ee/32.png) [@caio](https://community.weweb.io/u/caio)\
**Post date:** [June 20, 2023, 3:21am UTC](https://community.weweb.io/t/how-to-make-header-transparent-initially-and-then-change-color-when-page-is-scrolled-down/3110/3 "2023-06-20T03:21:54Z")

</div>

thanks @broberto

---

<div class="post-metadata">

**Author:** ![Adam](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/adam/32/9449_2.png) [@Adam](https://community.weweb.io/u/Adam)\
**Post date:** [November 15, 2023, 6:10pm UTC](https://community.weweb.io/t/how-to-make-header-transparent-initially-and-then-change-color-when-page-is-scrolled-down/3110/4 "2023-11-15T18:10:54Z")

</div>

@caio  
This can also now be done directly in the editor without javascript

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [November 15, 2023, 11:17pm UTC](https://community.weweb.io/t/how-to-make-header-transparent-initially-and-then-change-color-when-page-is-scrolled-down/3110/5 "2023-11-15T23:17:14Z")

</div>

Indeed, you can now do this in no-code in WeWeb. Thanks for mentioning it @Adam!

Here’s a [one-minute video](https://youtu.be/PqG1MlNQI7I) to show you how.