Collapsing Header
body {
text-align: center;
}
header {
height: 100px;
background: #dbdbdb;
width: 100%;
z-index: 10;
position: fixed;
}
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 100px;
background: #707070;
}
#content {
width: 100%;
position: relative;
top: 400px;
background: #ebebeb;
height: 1500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Collapsing Header Effect</title>
</head>
<body>
<div id="container">
<header>
<h1>This is my header</h1>
</header>
<div id="banner">
<h2>This is my banner</h2>
</div>
<div id="content">
<p>Content goes here</p>
</div>
</div>
</body>
</html>