Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="wrapper">
  <div class="sticky">Sticky Header</div>
  <div class="content">
    <p>A beaver is a baroque chill. Far from the truth, the plaster is a theory. Few can name a palmate conifer that isn't a discreet tiger. In recent years, the first hitchy cushion is, in its own way, a relation.</p>

    <p>A carol sees a cellar as a pass partridge. Though we assume the latter, we can assume that any instance of a lyric can be construed as a farci fold. Before waitresses, purchases were only knees. The screws could be said to resemble grasping wishes.</p>

    <p>We can assume that any instance of a greece can be construed as an unsafe tanker. A cupboard of the jumper is assumed to be a plotful reward. Inhaled owners show us how offences can be meters. A feedback can hardly be considered a turdine entrance without also being a carol.</p>

    <p>A conchate popcorn without cappellettis is truly a committee of shipshape forces. In recent years, a bedroom is a riblike computer. An appeal is a charles's crime. This could be, or perhaps a swallow of the brian is assumed to be a dormie geranium.</p>

    <p>A half-sister of the bankbook is assumed to be a becalmed juice. Those moroccos are nothing more than rocks. We know that a glowing plain is a yoke of the mind. We can assume that any instance of a department can be construed as a gamic plane.</p>

    <p>The cave is a battery. A company is a peaked motion. As far as we can estimate, the literature would have us believe that a thermic station is not but a christmas. If this was somewhat unclear, a crayon is an oil from the right perspective.</p>

    <p>A gate is a patricia from the right perspective. This is not to discredit the idea that the key of a magician becomes a quinate guarantee. They were lost without the meagre tin that composed their goose. A larky pansy without pikes is truly a rabbi of surpliced doubts.</p>

    <p>The wine is a television. Grotesque juices show us how latencies can be chicks. The first smitten disadvantage is, in its own way, a liquor. Though we assume the latter, some posit the horsey carbon to be less than parky.</p>

    <p>A beaver is a baroque chill. Far from the truth, the plaster is a theory. Few can name a palmate conifer that isn't a discreet tiger. In recent years, the first hitchy cushion is, in its own way, a relation.</p>

    <p>A carol sees a cellar as a pass partridge. Though we assume the latter, we can assume that any instance of a lyric can be construed as a farci fold. Before waitresses, purchases were only knees. The screws could be said to resemble grasping wishes.</p>
  </div>
</div>
              
            
!

CSS

              
                // In Chrome, change this value to see how box-shadow blur affects the position of the element when using position: sticky.
$blur: 4px;

.sticky {
  position: sticky;
  top: 0;
  padding: 24px;
  text-align: center;
  background-color: white;
  border: 1px solid black;
  box-shadow: rgba(black, 0.4) 0 4px $blur;
}

.wrapper {
  margin: 60px auto;
  max-width: 800px;
  border: 1px solid lightgray;
}

body {
  padding: 24px;
}

p {
  font-size: 1em;
  line-height: 1.4;
  margin-bottom: 24px;
}
              
            
!

JS

              
                // UPDATE: This appears to be fixed in Chrome version 57.
              
            
!
999px

Console