123

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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <header>
  Header
</header>
<main>
  <button type="button">Bookmarklet</button>
  <h1>Main content (what you <em>actually</em> want to read)</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis cras sed felis eget velit aliquet. Eu feugiat pretium nibh ipsum. Integer feugiat scelerisque varius morbi enim nunc
    faucibus a. Eu nisl nunc mi ipsum faucibus vitae aliquet. Leo duis ut diam quam nulla. Sed nisi lacus sed viverra tellus in hac habitasse. Neque vitae tempus quam pellentesque nec nam aliquam sem et. Augue neque gravida in fermentum et sollicitudin
    ac orci. Porta lorem mollis aliquam ut porttitor leo a diam sollicitudin. Integer enim neque volutpat ac tincidunt vitae semper. Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Tempor orci dapibus ultrices in iaculis nunc sed
    augue. Integer malesuada nunc vel risus.</p>
  <p>At imperdiet dui accumsan sit amet nulla facilisi. Pretium quam vulputate dignissim suspendisse in est ante. Maecenas volutpat blandit aliquam etiam erat. Nisi scelerisque eu ultrices vitae auctor eu. Faucibus interdum posuere lorem ipsum dolor. Urna
    duis convallis convallis tellus id interdum velit laoreet. Fermentum dui faucibus in ornare quam viverra orci sagittis eu. Sem et tortor consequat id porta. Enim facilisis gravida neque convallis a cras semper auctor neque. Nulla malesuada pellentesque
    elit eget gravida cum. Donec pretium vulputate sapien nec sagittis. Laoreet sit amet cursus sit amet dictum sit amet justo.</p>
  <p>Porta nibh venenatis cras sed felis eget velit. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Nisi porta lorem mollis aliquam ut. Non enim praesent elementum facilisis leo. Mattis pellentesque id nibh tortor id aliquet lectus proin.
    In metus vulputate eu scelerisque felis imperdiet. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Lacus sed viverra tellus in hac habitasse platea dictumst. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus.
    Proin libero nunc consequat interdum varius. Mattis nunc sed blandit libero. Hac habitasse platea dictumst vestibulum rhoncus. Diam in arcu cursus euismod quis viverra nibh. Congue nisi vitae suscipit tellus. Nulla aliquet enim tortor at auctor urna.
    Diam sollicitudin tempor id eu nisl nunc mi.</p>
  <p>Id neque aliquam vestibulum morbi blandit. Mi in nulla posuere sollicitudin. Sit amet consectetur adipiscing elit ut aliquam purus. Vitae congue eu consequat ac felis donec. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Ut diam quam
    nulla porttitor massa id neque. Interdum velit euismod in pellentesque massa. Id porta nibh venenatis cras sed. Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat. Tempor nec feugiat nisl pretium. Urna duis convallis convallis
    tellus id interdum velit. Justo laoreet sit amet cursus. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Sit amet nisl purus in mollis nunc sed. Integer enim neque volutpat ac tincidunt vitae semper quis. Velit laoreet id donec ultrices
    tincidunt arcu non sodales neque. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Risus at ultrices mi tempus imperdiet. Et malesuada fames ac turpis egestas integer. Semper eget duis at tellus at urna condimentum
    mattis.</p>
  <p>Viverra adipiscing at in tellus integer. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Aliquam purus sit amet luctus venenatis lectus magna. Fames ac turpis egestas integer eget. Est sit amet facilisis magna etiam tempor
    orci eu lobortis. Ut venenatis tellus in metus vulputate eu scelerisque. Placerat in egestas erat imperdiet. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Aliquet bibendum enim facilisis gravida. Nec tincidunt praesent semper
    feugiat nibh. Eget duis at tellus at urna condimentum.</p>
  <p>In metus vulputate eu scelerisque felis imperdiet proin. In hac habitasse platea dictumst vestibulum rhoncus. Praesent tristique magna sit amet purus gravida. Massa vitae tortor condimentum lacinia quis vel eros. Ac odio tempor orci dapibus ultrices
    in iaculis nunc sed. Feugiat scelerisque varius morbi enim nunc faucibus a. Ut sem viverra aliquet eget sit amet tellus cras. Varius morbi enim nunc faucibus a pellentesque sit amet. Ultrices eros in cursus turpis. Cras adipiscing enim eu turpis.
    Lectus magna fringilla urna porttitor rhoncus dolor purus. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Quisque egestas diam in arcu cursus euismod quis. Malesuada fames ac turpis egestas maecenas pharetra convallis. Lacus suspendisse
    faucibus interdum posuere.</p>
  <p>Cras sed felis eget velit. Habitant morbi tristique senectus et netus et malesuada. Tortor consequat id porta nibh venenatis. Donec et odio pellentesque diam. Sed odio morbi quis commodo odio aenean sed. Id consectetur purus ut faucibus pulvinar elementum.
    Convallis aenean et tortor at risus viverra adipiscing at. Euismod lacinia at quis risus sed vulputate odio ut. Urna duis convallis convallis tellus id interdum velit laoreet id. Ultricies mi quis hendrerit dolor. Proin libero nunc consequat interdum
    varius.</p>
  <p>Vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Quis viverra nibh cras pulvinar. Nunc consequat interdum varius sit amet mattis vulputate enim. Id consectetur purus ut faucibus pulvinar elementum. Donec ac odio tempor orci dapibus
    ultrices. Id aliquet risus feugiat in ante metus dictum at. Fermentum leo vel orci porta. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Libero id faucibus nisl tincidunt eget nullam. Commodo odio aenean sed adipiscing diam donec
    adipiscing. Libero justo laoreet sit amet cursus sit amet dictum. At in tellus integer feugiat scelerisque varius morbi enim. Quam pellentesque nec nam aliquam sem. Non pulvinar neque laoreet suspendisse interdum consectetur libero id. Amet consectetur
    adipiscing elit ut aliquam. Purus semper eget duis at tellus at urna condimentum mattis. Est placerat in egestas erat imperdiet sed euismod nisi.</p>
  <p>Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Ut pharetra sit amet aliquam id diam. Egestas sed sed risus pretium quam vulputate dignissim. In tellus integer feugiat scelerisque varius morbi enim. Vestibulum mattis ullamcorper
    velit sed ullamcorper morbi tincidunt. Ut tellus elementum sagittis vitae et leo. Proin sed libero enim sed faucibus turpis in eu mi. Adipiscing elit ut aliquam purus. Sem nulla pharetra diam sit. Nibh cras pulvinar mattis nunc sed blandit. Aliquam
    malesuada bibendum arcu vitae elementum curabitur vitae. Sem et tortor consequat id porta nibh. Amet consectetur adipiscing elit ut aliquam purus sit amet. Volutpat lacus laoreet non curabitur gravida. Enim sit amet venenatis urna cursus eget nunc.</p>
  <p>Id volutpat lacus laoreet non curabitur. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Elit pellentesque habitant morbi tristique senectus et netus et. Proin libero nunc consequat interdum varius sit amet mattis vulputate. Aliquam sem
    fringilla ut morbi tincidunt augue interdum velit. Sed viverra ipsum nunc aliquet bibendum enim facilisis. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum.
    Dictum sit amet justo donec enim diam vulputate ut pharetra. Donec adipiscing tristique risus nec feugiat in fermentum posuere urna. Rhoncus est pellentesque elit ullamcorper dignissim. In nulla posuere sollicitudin aliquam ultrices sagittis orci
    a scelerisque. Id cursus metus aliquam eleifend mi in nulla.</p>
  <p>Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Et odio pellentesque diam volutpat. Tristique senectus et netus et malesuada fames ac turpis egestas. Eu turpis egestas pretium aenean pharetra. Enim eu turpis egestas pretium aenean
    pharetra magna ac placerat. Nec ultrices dui sapien eget mi proin. Sed risus ultricies tristique nulla aliquet enim tortor. Nisl condimentum id venenatis a. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Lectus sit amet est
    placerat in. Urna porttitor rhoncus dolor purus non enim praesent. Lobortis scelerisque fermentum dui faucibus. Etiam sit amet nisl purus in mollis nunc sed id. Egestas erat imperdiet sed euismod nisi. Ut consequat semper viverra nam libero justo
    laoreet sit amet.</p>
  <p>Sed risus ultricies tristique nulla aliquet enim. In metus vulputate eu scelerisque felis imperdiet proin. Amet volutpat consequat mauris nunc congue. Porta lorem mollis aliquam ut porttitor. Felis donec et odio pellentesque diam volutpat commodo. Et
    egestas quis ipsum suspendisse ultrices gravida. Id diam maecenas ultricies mi eget mauris. Id leo in vitae turpis massa sed elementum tempus egestas. Quam vulputate dignissim suspendisse in est ante. Elit pellentesque habitant morbi tristique senectus
    et netus. Placerat vestibulum lectus mauris ultrices eros in. A diam sollicitudin tempor id eu. Nulla pellentesque dignissim enim sit. Neque volutpat ac tincidunt vitae semper quis lectus nulla.</p>
  <p>Tincidunt augue interdum velit euismod in. Id interdum velit laoreet id donec ultrices tincidunt. Quam elementum pulvinar etiam non quam lacus. Massa eget egestas purus viverra accumsan in nisl nisi. Massa vitae tortor condimentum lacinia quis vel.
    Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Mi bibendum neque egestas congue quisque egestas diam in arcu. Porttitor leo a diam sollicitudin. Malesuada nunc vel risus commodo viverra maecenas accumsan. Urna nunc id cursus metus
    aliquam eleifend mi. Convallis aenean et tortor at risus. Facilisis mauris sit amet massa vitae tortor. Dis parturient montes nascetur ridiculus mus mauris. Nunc pulvinar sapien et ligula. Egestas diam in arcu cursus euismod. Commodo ullamcorper a
    lacus vestibulum sed. Leo urna molestie at elementum eu facilisis sed odio. Lobortis mattis aliquam faucibus purus. Dignissim suspendisse in est ante in. Augue neque gravida in fermentum et.</p>
  <p>Congue nisi vitae suscipit tellus. Proin fermentum leo vel orci porta non pulvinar neque laoreet. Dignissim sodales ut eu sem integer vitae justo. Sed turpis tincidunt id aliquet risus feugiat in. Vestibulum mattis ullamcorper velit sed. Ullamcorper
    velit sed ullamcorper morbi. Eget felis eget nunc lobortis mattis aliquam. Condimentum lacinia quis vel eros. Malesuada fames ac turpis egestas. Vitae suscipit tellus mauris a diam maecenas sed enim. Facilisis leo vel fringilla est ullamcorper eget
    nulla facilisi etiam. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Sapien et ligula ullamcorper malesuada proin libero. At volutpat diam ut venenatis tellus in metus. Pellentesque pulvinar pellentesque habitant morbi tristique
    senectus et netus et. Viverra justo nec ultrices dui sapien eget mi. Purus in massa tempor nec feugiat nisl pretium. Bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim.</p>
  <p>Sit amet mattis vulputate enim nulla aliquet porttitor lacus. Interdum velit laoreet id donec. Praesent elementum facilisis leo vel fringilla. In vitae turpis massa sed elementum tempus egestas sed. Non quam lacus suspendisse faucibus interdum posuere
    lorem ipsum dolor. Nascetur ridiculus mus mauris vitae. At risus viverra adipiscing at in. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat. In hac habitasse platea
    dictumst. Amet porttitor eget dolor morbi non arcu risus quis.</p>
  <p>Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. Fermentum dui faucibus in ornare quam. Ac turpis egestas sed tempus urna et pharetra pharetra. Platea dictumst quisque sagittis purus sit amet volutpat consequat. Lobortis elementum nibh
    tellus molestie. A condimentum vitae sapien pellentesque habitant. Amet risus nullam eget felis eget. Consectetur lorem donec massa sapien. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque. Molestie a iaculis at erat pellentesque
    adipiscing commodo elit.</p>
  <p>Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Vitae aliquet nec ullamcorper sit amet risus nullam. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Interdum varius sit amet mattis vulputate.
    Enim sed faucibus turpis in eu mi. Venenatis urna cursus eget nunc scelerisque. Commodo nulla facilisi nullam vehicula ipsum. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Enim neque volutpat ac tincidunt. Aliquam sem et tortor
    consequat id porta nibh venenatis cras. Venenatis tellus in metus vulputate eu scelerisque felis. Blandit libero volutpat sed cras ornare arcu dui vivamus arcu. Pretium nibh ipsum consequat nisl vel pretium. Congue eu consequat ac felis donec et odio
    pellentesque. Elit sed vulputate mi sit amet mauris commodo quis. Volutpat lacus laoreet non curabitur gravida arcu ac. Enim ut tellus elementum sagittis vitae et leo. Magna etiam tempor orci eu lobortis elementum. Egestas egestas fringilla phasellus
    faucibus scelerisque eleifend donec pretium vulputate. Eu consequat ac felis donec et odio pellentesque.</p>
  <p>Lectus quam id leo in vitae turpis massa. Cursus euismod quis viverra nibh cras pulvinar mattis nunc sed. Fringilla urna porttitor rhoncus dolor purus non. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Pulvinar pellentesque habitant
    morbi tristique. Nunc eget lorem dolor sed viverra ipsum. Ullamcorper morbi tincidunt ornare massa eget. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Massa enim nec dui nunc mattis enim ut tellus elementum. Viverra tellus
    in hac habitasse platea dictumst vestibulum rhoncus. Dignissim enim sit amet venenatis urna cursus eget nunc. Pretium aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Viverra ipsum nunc aliquet bibendum. Justo eget magna fermentum
    iaculis eu non diam phasellus vestibulum. Habitant morbi tristique senectus et netus. Turpis egestas integer eget aliquet nibh praesent tristique magna. Ac odio tempor orci dapibus ultrices in. Vitae turpis massa sed elementum tempus egestas sed sed
    risus. Cras adipiscing enim eu turpis egestas pretium aenean pharetra.</p>
  <p>Sit amet facilisis magna etiam tempor. Accumsan tortor posuere ac ut consequat semper. Nulla facilisi etiam dignissim diam quis enim lobortis. Odio facilisis mauris sit amet massa vitae tortor. Sed augue lacus viverra vitae congue eu consequat ac. Enim
    lobortis scelerisque fermentum dui. In cursus turpis massa tincidunt dui ut ornare. Accumsan in nisl nisi scelerisque eu ultrices vitae. Nulla aliquet porttitor lacus luctus accumsan tortor posuere. Consequat interdum varius sit amet mattis vulputate
    enim. Odio aenean sed adipiscing diam donec adipiscing. Sed libero enim sed faucibus turpis in eu mi. Consequat mauris nunc congue nisi vitae. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Aliquam vestibulum morbi blandit cursus risus
    at ultrices mi tempus. Tortor at risus viverra adipiscing. Vel pharetra vel turpis nunc eget lorem dolor. Dolor sit amet consectetur adipiscing elit pellentesque. Nibh mauris cursus mattis molestie a iaculis at.</p>
  <p>Pellentesque id nibh tortor id aliquet lectus proin. Amet mauris commodo quis imperdiet massa tincidunt nunc. Ac turpis egestas integer eget aliquet nibh. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Elementum
    integer enim neque volutpat ac. Varius duis at consectetur lorem donec massa sapien faucibus et. Et sollicitudin ac orci phasellus. Et egestas quis ipsum suspendisse ultrices. Sed arcu non odio euismod lacinia at quis risus sed. Vitae purus faucibus
    ornare suspendisse sed. Nulla aliquet enim tortor at auctor urna nunc. Eget aliquet nibh praesent tristique magna sit amet. Quam nulla porttitor massa id neque aliquam vestibulum. Ultricies leo integer malesuada nunc vel risus commodo viverra. Volutpat
    est velit egestas dui id ornare arcu. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Eget nullam non nisi est sit amet facilisis magna.</p>
</main>

<div id="dickbar">
  <p><strong>Pardon the interruption…</strong></p>
  <p>But we just want to interrupt you because we’re assholes!</p>
</div>

<dialog open>
  <p><strong>You should totally read this!</strong></p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam nobis itaque debitis fugiat qui ratione illum ab distinctio eveniet iusto numquam, inventore quibusdam quisquam id porro, ipsam commodi perferendis maiores.</p>
</dialog>
            
          
!
            
              :root {
  --box-shadow: 0 0 1rem hsla(0, 0%, 0%, 0.6);
}

body {
  font: 100%/1.5 "Helvetica Neue", Helvetica, sans-serif;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

@media only screen and (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

header {
  color: white;
  background-color: green;
  padding: 1rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  box-shadow: var(--box-shadow);
}

main {
  padding: 1rem;
  position: relative;
}

button {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

dialog {
  position: fixed;
  --width: 24rem;
  width: var(--width);
  margin-left: calc(var(--width) / -2);
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  background-color: hsla(0, 0%, 100%, 0.95);
  border: 0;
  box-shadow: var(--box-shadow);
}

#dickbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: blue;
  padding: 0 1rem;
  box-shadow: var(--box-shadow);
}
            
          
!
            
              function killSticky() {
  const elements = document.querySelectorAll('body *');
  const body = document.querySelector('body');
  
  if (getComputedStyle(body).overflow === 'hidden') {
    body.style.overflow = "unset";
  }
  
  elements.forEach(function (element) {
    if (["-webkit-sticky", "sticky", "fixed"].includes(getComputedStyle(element).position)) {
      element.parentNode.removeChild(element);
    }
  });
}

const btn = document.querySelector('[type="button"]');

btn.addEventListener('click', killSticky, false);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console