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>
  Fixed Header:  
  <a href="#one">One</a>
  <a href="#two">Two</a>
  <a href="#three">Three</a>
  <a href="#">(Back to Top)</a>
</header>

<main>
  <p>Top</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quas aperiam asperiores numquam illum unde minus ipsa reiciendis dolores natus. Eum repellat maiores accusamus soluta accusantium itaque corporis hic architecto.</p>
  <p>Laudantium, impedit. Eius quod harum illum laborum sint cupiditate deserunt? Vero atque delectus iure quisquam aspernatur, ullam suscipit, minima quae quasi sunt provident laborum iusto nemo sit nulla ipsam repellendus!</p>
  <p>Animi exercitationem totam velit deserunt! Asperiores vel animi esse tempora maxime voluptatem nihil assumenda fugit iusto incidunt. Recusandae perspiciatis illo consequatur maxime aliquid, a omnis nobis quibusdam quam modi soluta.</p>
  <p>Voluptatibus porro fugiat ratione exercitationem corporis et eos iusto dolorum deleniti consequatur quam, omnis sint impedit quidem harum asperiores. Cupiditate laboriosam praesentium ipsa cum commodi, mollitia iure culpa blanditiis quas?</p>
  <p>Velit molestias eius nihil facilis veritatis, laboriosam voluptatum, quibusdam adipisci ut laborum perferendis! Sint ea sit deserunt. Sapiente, ex aliquam maxime animi, libero tenetur ducimus, necessitatibus officiis quod perspiciatis nihil!</p>
  <p>Voluptatum quia sed deserunt. Consequatur quod sit facilis unde quo officiis, deserunt magni doloribus ullam quaerat iusto enim tenetur molestiae sunt eveniet quibusdam deleniti incidunt quam modi iste, odit eius.</p>
  <p>Voluptas similique ab at, corporis natus voluptates impedit qui quam, totam, reprehenderit consequuntur rerum laboriosam! Veniam sapiente unde error blanditiis obcaecati ducimus tempora ipsum. Nisi blanditiis eum deleniti tenetur quis.</p>
  <p>Consequatur nam soluta, reiciendis nihil neque facere obcaecati voluptates veniam corporis at beatae numquam veritatis optio et? Aut, veniam ab? Dolorum repudiandae dolores consectetur sint id deserunt soluta quas tempora!</p>
  <p>Corrupti sit rem itaque quasi assumenda. Fuga accusantium culpa suscipit impedit amet ullam quaerat, qui asperiores facere voluptatibus exercitationem libero illum sint ducimus tenetur non alias praesentium, necessitatibus autem provident.</p>
  <p>Officiis, harum nulla? Nam libero amet dicta. Voluptas enim nesciunt nobis consectetur magni, sint labore odio magnam quis aliquid nemo dolorum ducimus, ab voluptatem aspernatur sequi itaque fuga earum dolore.</p>
  <h1 id="one">One</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi, soluta. Possimus animi consequatur ipsum sed neque voluptatem unde corporis, vel eum consectetur amet beatae quia tenetur totam, repellat molestiae dicta?</p>
  <p>Blanditiis, delectus sunt! Possimus obcaecati ullam sit dignissimos perferendis quas officia. Praesentium, ab! Deleniti nemo quos esse doloribus explicabo deserunt, consectetur ex placeat ad necessitatibus non voluptas culpa voluptatibus illo?</p>
  <p>Et magni numquam sint eveniet reprehenderit cumque magnam voluptatibus, aperiam consequuntur natus, deleniti, dolores mollitia nobis assumenda id dolorem incidunt ratione quam explicabo temporibus perspiciatis. Eligendi perferendis eius doloremque at?</p>
  <p>Enim doloribus voluptate, cupiditate earum sint eius distinctio minima sequi ex, reprehenderit quibusdam. Voluptatibus explicabo fuga, quos quidem eveniet quia voluptatem labore ullam harum error itaque quibusdam adipisci, corporis minima.</p>
  <p>Fuga nisi quo saepe magni? Totam asperiores reprehenderit quibusdam repudiandae illum illo nulla tenetur modi, neque, iste quas fugiat in, enim minima atque beatae obcaecati aut adipisci labore itaque sit?</p>
  <p>Doloremque a illo corporis dicta laborum! Perspiciatis qui debitis aliquid soluta doloribus reiciendis nihil. Quis tempore temporibus consequuntur a? Repellendus est quibusdam iste? Est temporibus quo eligendi rem illo natus.</p>
  <p>Et tempora non quam saepe eum nesciunt nam explicabo quibusdam optio rem debitis aliquam vitae suscipit ea dolor ratione a soluta esse inventore, molestias, quasi, deleniti dolorum doloribus minima. Asperiores.</p>
  <p>Repudiandae eligendi provident commodi, atque fugit magni cupiditate voluptatem unde dolorem modi in quaerat, tempore eveniet ex temporibus sit facilis dolores sed aperiam. Molestias modi repudiandae ratione, perspiciatis ducimus nobis.</p>
  <p>Perferendis unde fuga dolorum sequi, architecto culpa repudiandae cum suscipit neque maxime amet officiis nihil similique omnis! Sequi ad officia corporis tenetur autem, dicta nobis a vel fugit? Voluptatibus, necessitatibus!</p>
  <p>Unde veritatis labore possimus facere sapiente veniam! Doloremque velit rerum sit error quidem aut, aperiam rem voluptas laborum amet nemo harum id beatae maiores, iure excepturi aliquam mollitia illum assumenda?</p>
  <h2 id="two">Two</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere, saepe minus? Officia ipsum magnam ducimus harum quod ratione, autem quas aliquam laudantium nam repellendus facere amet nihil enim in pariatur?</p>
  <p>Magni totam autem mollitia natus voluptatem tempore tenetur nobis velit veniam facere beatae quisquam temporibus cum saepe esse assumenda enim, iure porro dicta odit numquam. Ipsam fugiat dicta commodi dolore?</p>
  <p>Placeat quae recusandae aspernatur libero aut! Nam similique quaerat non distinctio neque cum minima voluptates adipisci facere labore dolore ex consectetur tempora architecto tenetur, ut iste quidem quia laborum nesciunt?</p>
  <p>Officiis quidem quia enim ratione? Recusandae cumque magnam officia, distinctio tempore repellendus, quia sunt saepe impedit magni quasi praesentium sed eos expedita. Tempore magni adipisci eos non nesciunt sint minima!</p>
  <p>Fugiat iure voluptatibus et quidem expedita magni quo corporis consectetur quas fuga enim libero esse soluta iste explicabo iusto reiciendis voluptates accusantium eius, repudiandae voluptatem cum nisi repellat veniam. Vel.</p>
  <p>Animi, harum nihil rerum, a asperiores consequuntur eius architecto alias est beatae possimus natus voluptates, ipsam incidunt. Voluptate at necessitatibus ducimus maiores alias, non, quae amet, aperiam aspernatur voluptatibus expedita?</p>
  <p>A dolor iusto sequi repudiandae, in ad quaerat tenetur facere necessitatibus. Quisquam cum quasi quod voluptatem quae, fuga pariatur praesentium maiores consequuntur, delectus explicabo impedit voluptates quas aspernatur, dolorum culpa.</p>
  <p>Sunt modi ex cupiditate minus quasi? Nihil reiciendis odio laboriosam nulla? Laborum fugiat, sapiente commodi aspernatur repellat quisquam, molestiae rem hic facere saepe quo quas iusto voluptatem iure blanditiis ad?</p>
  <p>Asperiores culpa cum corporis. Molestiae accusantium, ad dolore explicabo maxime dolorem officiis delectus repellendus asperiores illum. Quos nam laboriosam quisquam totam hic corporis eveniet enim. Voluptatum hic voluptatibus sint est.</p>
  <p>Sequi, eaque numquam. Est cum amet illum doloribus quidem consequuntur sequi, aliquam enim totam voluptate voluptatum quia animi iusto. Nihil inventore autem molestiae eos nulla dignissimos voluptatem vitae eius voluptate.</p>
  <h3 id="three">Three</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab natus iste facere corporis voluptatem incidunt reiciendis est nobis, deserunt, harum aut facilis explicabo veritatis, itaque deleniti odit perspiciatis cupiditate ullam.</p>
  <p>Distinctio rem, impedit omnis necessitatibus, voluptas et quisquam perspiciatis inventore possimus corporis ratione eos similique voluptate beatae reprehenderit eaque nostrum fugiat, dolore id ex. Odio earum officia laboriosam in assumenda.</p>
  <p>Sint atque unde eveniet totam cumque quo dolorum earum expedita eum? Rerum assumenda aperiam asperiores corrupti illo odio voluptatem, unde quo modi, blanditiis porro minima ut molestias. Voluptate, aliquam vitae!</p>
  <p>Id, debitis ea repudiandae veritatis reprehenderit dignissimos tempore delectus maiores natus nihil libero quam culpa explicabo eveniet, expedita, eos nulla atque odit magnam deserunt iste quasi et! Doloribus, eius rerum.</p>
  <p>Facilis nam sint temporibus saepe dolorum. Eveniet nihil, doloribus molestias fuga fugit provident quas illum! Iste, adipisci distinctio quam neque velit beatae dolores suscipit minus labore voluptatibus, delectus molestias optio.</p>
  <p>Cumque minima natus dignissimos vero ratione quae amet unde beatae. Et eveniet molestias id, fuga quibusdam nam molestiae. Eos temporibus nesciunt nemo commodi error enim provident repellendus maiores accusantium ad.</p>
  <p>Est provident excepturi accusamus dicta sunt nihil eius, alias, possimus perspiciatis blanditiis tenetur mollitia molestias! Est, quo eaque. At dignissimos consequatur dicta asperiores! Nam sequi facere, voluptatibus fuga nemo sapiente?</p>
  <p>Aut consequuntur consequatur explicabo eos itaque? Tenetur, corporis porro consectetur sunt recusandae nisi! Esse ab vitae iste debitis dignissimos illum, cum in enim nulla dolores modi nesciunt ea quaerat fugiat?</p>
  <p>Error porro asperiores et suscipit odit laboriosam commodi, nemo eius laudantium architecto mollitia delectus impedit. Possimus animi, dignissimos cupiditate reiciendis eveniet non, doloribus tempore fuga error hic repellat cumque voluptatem.</p>
  <p>Dolore illum similique nemo autem voluptatem amet placeat, non inventore obcaecati voluptatibus, repellat dignissimos atque harum neque fugiat quaerat eum molestias maiores, repudiandae error ut! Sunt corporis veniam porro alias!</p>
</main>
              
            
!

CSS

              
                html {
  height: 100%;
  scroll-padding-top: var(--header-height, 5rem);
  scroll-behavior: smooth;
}

// reset scroll behavior if user don’t like too much motion
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: initial;
  }
}
 
:target {
  scroll-margin-top: 1ex; // 1em
  
  @supports not (scroll-margin-top: 1rem) {
    &::before {
      content: '';
      display: block;
      position: relative;
      bottom: 0;
      width: 0;
      height: calc(var(--header-height, 5rem) + 1em);
      margin-top: calc(-1 * (var(--header-height, 5rem) + 1em));
    }
  }
}

body {
  padding-top: var(--header-height, 5rem);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  padding: 1rem;
  background: #1976D2;
  
  a {
    color: inherit;
  }
}


// defaults and demo
* {
  box-sizing: border-box;
}


body {
  font-size: 1.5rem;
  font-family: sans-serif;
  height: 100%;
  line-height: 1.4;
  margin: 0 auto;
  max-width: 75ch;
}

              
            
!

JS

              
                let windowWidth = window.innerWidth;

function setHeaderHeight() {
  document.documentElement.removeAttribute('style');
  var headerHeight = document.querySelector('header').scrollHeight;
  document.documentElement.style.setProperty('--header-height', `${headerHeight}px`);
};

window.addEventListener('resize', function() {
    // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
    if (window.innerWidth != windowWidth) {
        // Update the window width for next time
        windowWidth = window.innerWidth;
        // Do stuff here
        setHeaderHeight();
    }
    // Otherwise do nothing
})

document.addEventListener('DOMContentLoaded', function() {
    setHeaderHeight();
})

              
            
!
999px

Console