# 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:** 2

<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 12, 2020, 5:08am UTC](https://meta.discourse.org/t/transparent-header-until-scroll-down/143791/2 "2020-03-12T05:08:12Z")

</div>

I managed to get this working well enough.

js:

```plaintext
<script>

var dHeaderWhite = document.createElement('style');
dHeaderWhite.innerHTML = `
/*.docked. .d-header {
    position:fixed;
}*/
.d-header {
    background-color: white;
    box-shadow: 0 1px 8px rgba(0,0,0,0.18);
    -webkit-animation: fadein 0.5s;
    animation: fadein 0.5s;
}`;

var dHeaderTransparent = document.createElement('style');
dHeaderTransparent.innerHTML = `
/*.docked .d-header {
    position:absolute;
}*/
.d-header {
    background-color:transparent;
    box-shadow: unset;
    -webkit-animation: fadeout 0.5s;
    animation: fadeout 0.5s;
}`;

// When the user scrolls down the document, change from transparent background to white
$(document).ready(function($){
    $(function(){
        $(window).scroll(function(){
            
            if ($(".extra-info-wrapper")[0]) {
                // White if class exists
                document.head.appendChild(dHeaderWhite);
            } else if ($(this).scrollTop() > 150) { 
                // class doesn't exist but user has scrolled
                document.head.appendChild(dHeaderWhite);
            } else {
                // Transparent if class doesn't exist
                document.head.appendChild(dHeaderTransparent);
            }
        });
    });
});
</script>

```

css:

```plaintext
.d-header {
    background-color: transparent;
    box-shadow:unset;
}
.d-header-icons .d-icon {
    color: #9c9c9c;
}

```

I want the header to start off as scrollable and switched to fixed on scroll, but this doesn’t work yet. I’ll keep hacking away.

---

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