<header class="wsui-shadow-on-scroll">
<div class="is-toolbar">
<h3>Header</h3>
</div>
</header>
.wsui-shadow-on-scroll {
height: 80px;
position: sticky;
top: -16px;
z-index: 1;
-webkit-backface-visibility: hidden;
}
.wsui-shadow-on-scroll::before, .wsui-shadow-on-scroll::after {
content: "";
display: block;
height: 16px;
position: sticky;
}
.wsui-shadow-on-scroll::before {
top: 48px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
.wsui-shadow-on-scroll::after {
background: linear-gradient(white 10%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.4) 70%, transparent);
top: 0;
z-index: 2;
}
.wsui-shadow-on-scroll .is-toolbar {
height: 64px;
position: sticky;
top: 0px;
margin-top: -16px;
z-index: 3;
}
.test-wsui-shadow-on-scroll {
border: 1px solid red;
}
*/