cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <section>
  <span>Sticky Header!</span>
</section>
<header>
  <h1>Site Name</h1>
  <nav>
    <a href=#>About</a>
    <a href=#>Services</a>
    <a href=#>Contact</a>
  </nav>
</header>
<article>
  <h1>Headline</h1>
  <p>In elementum lorem eget est euismod ornare. Phasellus sit amet pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam nibh. Mauris molestie, urna accumsan ornare semper, augue nibh posuere lorem, vitae feugiat sem magna eget massa. Vivamus quis tincidunt dolor. Fusce efficitur, orci non vestibulum consequat, lectus turpis bibendum odio, in efficitur leo felis sed justo. Fusce commodo iaculis orci, quis imperdiet urna. Sed mollis facilisis lacus non condimentum. Nunc efficitur massa non neque elementum semper. Vestibulum lorem arcu, tincidunt in quam et, feugiat venenatis augue. Donec sed tincidunt tellus, a facilisis magna. Proin sit amet viverra nibh, bibendum gravida felis. Vivamus ut nunc id mauris posuere pellentesque. Praesent tincidunt id odio id feugiat.</p>
  <p>In ac nisi lacus. Fusce est dolor, tincidunt ut bibendum vitae, fermentum ac quam. Aliquam pretium tristique nibh quis iaculis. In et cursus ex, eu aliquet ex. Proin facilisis lacus sit amet sapien ultrices, ut vehicula arcu lobortis. Vivamus mollis ipsum ut hendrerit molestie. Morbi lacinia, sapien eu dictum dignissim, tellus tortor congue magna, sit amet bibendum libero nisi id massa.</p>
  <p>Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor. Cras congue, massa nec sagittis mollis, dui felis ultrices magna, tincidunt finibus lorem quam in sem. Morbi odio turpis, pulvinar sit amet vulputate quis, ultricies eu libero. Donec ac maximus neque, nec maximus nibh. Morbi rhoncus convallis urna, accumsan porta lorem hendrerit in. Cras eget nisl dui. Morbi faucibus nisi eget ipsum semper vulputate. Mauris nec tincidunt lectus. Aenean ac mi consequat velit dignissim consectetur. Fusce placerat ac ipsum ac eleifend. Aenean quis faucibus ex.</p>
  <p>Cras egestas tempor nibh, a fermentum lorem sollicitudin non. Nulla facilisi. In at elit id leo tristique condimentum. Donec at est nulla. Mauris egestas magna ut laoreet pretium. Sed ultrices suscipit vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sapien eros. Vivamus viverra ultricies gravida. Nam urna nibh, blandit a vulputate at, vehicula non nulla. Aenean ut nulla leo. Praesent in ullamcorper est.</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus bibendum nec arcu eu lobortis. Nam convallis faucibus ante sed porta. Nullam ut convallis elit, quis venenatis nunc. Curabitur sed sem eget velit condimentum rutrum in et orci. Nunc non suscipit eros. Suspendisse porta sem vel justo commodo dictum. Aliquam erat ligula, fringilla nec suscipit sed, porta vitae turpis. Vestibulum rhoncus placerat nulla vitae suscipit. Curabitur consectetur ex ut odio tristique vehicula. Ut ligula tortor, tincidunt quis sodales vitae, ornare a turpis. Proin sit amet finibus enim. Fusce tempus a neque vitae tempor. Aenean rutrum, libero iaculis interdum vulputate, dui eros vehicula nisi, at interdum enim lacus eu diam.</p>
</article>
            
          
!
            
              * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
}
html {
  font-size: 10pt;
  line-height: 1.4;
  font-weight: 400;
  font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: #eee;
}
section {
  height: 100vh;
  background: coral;
}
section span {
  margin: 0;
  font-size: 400%;
  text-align: center;
  line-height: 1;
  padding-top: calc(50vh - 20pt);
  display: block;
  font-weight: 700;
}
header {
  width: 100%;
  padding: 1em;
  font-size: 140%;
  position: absolute;
  top: 100vh;
  left: 0;
  transition: opacity .2s ease-in-out;
  text-align: center;
}
header h1 {
  font-weight: 600;
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
}
nav a {
  display: inline-block;
  outline: none;
  text-decoration: none;
  opacity: .7;
  padding: 0 .5em;
  color: black;
  transition: opacity .2s ease-in-out;
}
nav a:hover,
nav a:focus {
  opacity: 1;
}
article {
  margin: 5em auto 0;
  padding: 1em;
  font-size: 140%;
  max-width: 800px;
  background: white;
  box-shadow: rgba(0,0,0,.05) 0 3px 15px;
}
article p {
  margin: 0;
  color: #333;
}
article p + p {
  margin-top: .7em;
}
@media (min-width: 500px) {
  header {
    text-align: left;
  }
  nav {
    float: right;
  }
  article {
    margin: 3.5em auto 0;
    padding: 2em;
  }
}
@media (min-width: 800px) {
  article {
    margin: 3.5em auto;
  }
}

/* And here's the magic! EQCSS.js required */
@element html, body and (min-scroll-y: 100vh) {
  header {
    position: fixed;
    top: 0;
    background: white;
    box-shadow: rgba(0,0,0,.05) 0 3px 15px;
  }
}
            
          
!
999px
Loading ..................

Console