# Header scroll shadow

**URL:** https://meta.discourse.org/t/header-scroll-shadow/198021
**Category:** UX
**Created:** [July 23, 2021, 8:48pm UTC](https://meta.discourse.org/t/header-scroll-shadow/198021 "2021-07-23T20:48:59Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [July 24, 2021, 9:38pm UTC](https://meta.discourse.org/t/header-scroll-shadow/198021/4 "2021-07-24T21:38:09Z")

</div>

You can add something like to the header tab of your theme

```xml
<div class="header-anchor"></div>

<script type="text/discourse-plugin" version="0.8">
if (!"IntersectionObserver" in window) return;

const { on } = require("discourse-common/utils/decorators");

const stickyClass = "sticky";

api.modifyClass("component:site-header", {
  @on("didInsertElement")
  stickyHeaderCheck() {
    const anchor = document.querySelector(".header-anchor");
    const header = this.element;

    new IntersectionObserver(entries => {
      if (!entries[0].isIntersecting) {
        header.classList.add(stickyClass);
      } else {
        header.classList.remove(stickyClass);
      }
    }).observe(anchor);
  }
});
</script>

```

This will add a `sticky` class to the header wrapper and allows you to set custom css when the header is “stuck” to the top as you scroll

```scss
.d-header {
  box-shadow: none;
  transition: box-shadow 0.3s ease-in-out;
  will-change: box-shadow;
  .sticky & {
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  }
}

```

---

_[View the full topic](https://meta.discourse.org/t/header-scroll-shadow/198021)._