Apply Box Shadow To Sticky Navigation On Scroll

A pure CSS implementation of the drop-shadow effect, which appears below a header navigation bar when we start to scroll the page.

How to use it:

1. Code the HTML for the header navigation.

<header class="wsui-shadow-on-scroll">
  <div class="is-toolbar">
    <h3>Header</h3>
  </div>
</header>

2. Make the header navigation sticky and apply a drop-shadow effect to it when scrolling down the page.

/*wsui-shadow-on-scroll Start*/
.wsui-shadow-on-scroll {
  height: 80px;
  position: sticky;
  top: -16px;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  /* PSEUDO ELEMENTS to create drop-shadow */
  /* SHADOW */
  /* COVER */
}
.wsui-shadow-on-scroll::before, .wsui-shadow-on-scroll::after {
  content: "";
  display: block;
  height: 16px;
  /* make pseudo elements sticky as well */
  position: sticky;
}
.wsui-shadow-on-scroll::before {
  top: 48px;
  /* shadow is at bottom of element, so at 48 + 16 = 64px */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
.wsui-shadow-on-scroll::after {
  /* linear gradient from background color to transparent acts as
     a transition effect so the shadow appears gradually */
  background: linear-gradient(white 10%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.4) 70%, transparent);
  top: 0;
  /* cover should fall over shadow */
  z-index: 2;
}
.wsui-shadow-on-scroll .is-toolbar {
  height: 64px;
  position: sticky;
  top: 0px;
  /* compensate for shadow with negative margin */
  margin-top: -16px;
  /* content should fall over shadow and cover */
  z-index: 3;
}
/*wsui-shadow-on-scroll End*/
.test-wsui-shadow-on-scroll {
  border: 1px solid red;
}

Changelog:

08/14/2022

• fix: use css var