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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <header>
 Header disappearing
</header>

<div class="sticky">
  Sticky Sub header ... it's nice!
</div>

<main>
  <h2>Sticky header example</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda similique corporis, commodi molestias quam aliquid enim sint. Sunt nihil, reiciendis cum iusto nobis doloremque et excepturi soluta eaque at suscipit deserunt pariatur totam beatae tempora
  dolorem quisquam libero labore sapiente laborum est eligendi molestias doloribus? Illo porro ab blanditiis eveniet quia voluptatum, architecto consectetur atque pariatur, officia rerum eos minus voluptate aliquam recusandae reprehenderit modi soluta
  necessitatibus repudiandae! Dolor suscipit fugit magnam? Nihil quod blanditiis et incidunt odit quis voluptate, minus sunt cum cumque quisquam harum eos iusto dicta aliquid, dolores, exercitationem assumenda placeat quidem amet cupiditate vel ipsum
  voluptatem. Enim dolore praesentium nostrum, quasi labore dicta sunt aspernatur unde impedit, incidunt quas iste laboriosam aperiam quo natus pariatur nobis. Repellat, quisquam. Eos inventore voluptatem incidunt fuga labore distinctio. Accusantium deserunt
  quisquam perspiciatis. Quos tempore, cumque odit ea vitae debitis quibusdam distinctio animi temporibus facere illum? Veniam provident voluptatem non, illo tenetur deleniti minus accusantium illum reprehenderit tempore, sequi iste magnam laborum in
  corrupti ipsam voluptatibus voluptate totam? Fugiat laudantium accusantium vero odit neque! Dolor quae tenetur fuga reiciendis dolore accusamus quia, impedit qui repellat! Ipsa voluptate ullam incidunt maiores atque corporis magnam. Explicabo debitis
  eligendi accusamus suscipit illum? Cumque sint accusamus sapiente, tempora inventore sunt et. Esse fugit minima earum temporibus fuga quas! Maiores eum reiciendis, alias asperiores perspiciatis in ex, esse quos aliquid nam omnis doloremque cupiditate
  laboriosam, sint deserunt! Ipsa quo cum perspiciatis vel. Cum excepturi fuga maxime expedita nihil optio iusto, tempora nulla sed assumenda veniam molestias harum enim laudantium accusamus quod similique? Illum quia vero laborum? Unde, corrupti corporis.
  Laboriosam dolores aspernatur blanditiis odio alias minus, fugiat deleniti explicabo commodi omnis? Modi reprehenderit nesciunt voluptates dolores! Odit, doloremque ipsum placeat vel impedit veritatis, vero quaerat tenetur perspiciatis eius earum enim
  atque rerum quam aliquid, eligendi quod corporis modi reiciendis cum! Nemo dolor molestiae ut ducimus, id a minima provident modi exercitationem dicta inventore labore aspernatur perspiciatis nihil libero corporis cum vitae iure dolore animi earum sint
  optio deleniti numquam. Praesentium autem accusamus dolor eius cupiditate quidem quas ut fugit eligendi? Distinctio repellat, voluptatem blanditiis modi accusamus, id est beatae rerum, sunt pariatur cupiditate tempore ratione neque soluta earum velit
  ab odio iste dicta numquam animi dolorem recusandae perspiciatis necessitatibus. Est alias tenetur vel obcaecati, ipsum ipsa. Aliquid ad modi ratione molestiae ea consequuntur, non, eligendi illo illum consectetur atque nam ab facilis optio est tenetur
  vel nesciunt explicabo doloremque corporis voluptatem nulla. Magni, consequatur obcaecati. Maiores eligendi voluptates sapiente consequuntur mollitia pariatur illo magni exercitationem ea tempore, est soluta quasi libero fuga ex odio. Saepe iure animi
  eaque deleniti impedit quis illum laboriosam vel optio ipsum odit cupiditate officia iusto velit unde, quam rerum accusamus aliquam nesciunt modi provident iste. Exercitationem, mollitia voluptate accusantium vitae in quis voluptatibus, sit id voluptatum
  voluptatem eos libero, dignissimos dolore qui explicabo architecto aperiam magnam fugit. Possimus accusantium reprehenderit, asperiores ratione neque omnis culpa! Quos quod, eos distinctio, minus delectus voluptate quis quisquam enim perspiciatis est,
  obcaecati reiciendis quae.</p>
</main>
              
            
!

CSS

              
                :root {
  --color-pink: #d22780;
  --color-yellow: #f8b500;
}

body {
  margin: 0;
  height: 200vh;
  font-size: 125%;
}

header {
  padding: 1em 2em;
  background: var(--color-pink);
  color: #fff;
}

.sticky {
  position: sticky;
  top: 0;
  padding: .8em 2em;
  text-align: center;
  background: var(--color-yellow);
  color: #fff;
}

main {
  padding: 2em;
}

p {
  line-height: 1.5;
}
              
            
!

JS

              
                
              
            
!
999px

Console