# Transparent header until scroll down

**URL:** <https://meta.discourse.org/t/transparent-header-until-scroll-down/143791>\
**Category:** Development\
**Created:** [March 10, 2020, 10:56am UTC](https://meta.discourse.org/t/transparent-header-until-scroll-down/143791 "2020-03-10T10:56:38Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Tim\_Jefferies](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tim_jefferies/32/113296_2.png) [@Tim\_Jefferies](https://meta.discourse.org/u/Tim_Jefferies)\
**Post date:** [March 10, 2020, 10:56am UTC](https://meta.discourse.org/t/transparent-header-until-scroll-down/143791/1 "2020-03-10T10:56:38Z")

</div>

I’d like to have the header be transparent when at the top of the page, and then when the user scrolls down it becomes white.

I tried adding this javascript code in the ‘edit CSS/HTML’ of the `</body>` section as follows:

```plaintext
<script>
// When the user scrolls down 100px from the top of the document, change background to white
$(document).ready(function($){
    $(function(){
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100){
                document.getElementsByClassName("d-header").style.backgroundColor = "white";
                document.getElementsByClassName("d-header").style.boxShadow = "0 1px 8px rgba(0,0,0,0.18)";
            } else {
                document.getElementsByClassName("d-header").style.backgroundColor = "transparent";
                document.getElementsByClassName("d-header").style.boxShadow = "unset";
            }
        });
    });
});
</script>

```

This doesn’t seem to work though. Any ideas?

Ideally I’d like this change to happen at the same time as the page hits the #main-outlet and .d-header changes to a fixed position, but I don’t know how.

---

_[View the full topic](https://meta.discourse.org/t/transparent-header-until-scroll-down/143791)._