Lego2012
1/16/2017 - 9:41 AM

Collapsing Header

Collapsing Header

02-collapsing-header.css
content_copyfile_download
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;
}
01-index.html
content_copyfile_download
<!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>