<header>Header</header>
<shadow></shadow>
<main>Content</main>
body {
margin: 0;
padding: 0;
}
header {
position: sticky;
background: #fff;
top: 0;
font-size: 20px;
padding: 10px;
z-index: 1;
background-color: #eee;
}
shadow::before {
content: "";
box-shadow: 0 0 10px 1px #333;
position: fixed;
width: 100%;
}
shadow::after {
content: "";
width: 100%;
height: 30px;
background: linear-gradient(to bottom, #fff 50%, transparent);
position: absolute;
}
main {
height: 2000px;
margin-top: 20px;
padding: 0 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.