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

Packages

Add 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 or require. We'll also process your JavaScript with Babel.

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

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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

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.

            
              <div id="bar"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe esse ipsa corrupti, expedita unde eius tenetur dolore atque aliquam possimus dolorum, alias fugit ducimus ipsam, dolorem eaque similique repudiandae et aut, temporibus architecto! Earum suscipit, quas non. Reiciendis eos esse qui rerum accusamus ducimus deleniti quo delectus? Corporis nihil voluptates, sapiente fugit molestias cum sequi explicabo! In ratione debitis assumenda magnam quas ducimus, similique mollitia illum perferendis sapiente laboriosam consequuntur eveniet deserunt ipsam, placeat amet earum aperiam. Tenetur expedita id illum, iste, saepe deleniti suscipit. Aperiam ad quis, repellat debitis officiis, magni architecto, doloribus eum cum maiores maxime hic praesentium tenetur dicta ipsa quo quae nihil, exercitationem consequatur iste. Quam beatae libero sit quo eum illum, rerum suscipit ipsum natus quas quidem delectus recusandae consequatur cupiditate necessitatibus molestias eius in fugit ut ab dignissimos reprehenderit doloribus quos illo. Sequi voluptas, nemo nam blanditiis! Quidem, dignissimos iusto omnis voluptatibus cumque, sunt iste. Eius odit voluptas, pariatur quibusdam minima numquam error illum facilis. Explicabo natus consectetur saepe aperiam nemo! Veniam voluptatem illo unde officiis inventore ea aut aliquid distinctio laboriosam earum sequi, cum veritatis quos aspernatur odit, ullam nulla aperiam tempora. Aut incidunt, sunt quisquam iusto possimus laudantium quae tempore? Natus dolorem fugiat error hic esse magni aliquam perspiciatis perferendis numquam consectetur? Dolorum aut recusandae, cupiditate fuga, mollitia, odio repellat eveniet nulla eligendi culpa officiis rem commodi hic! Ad itaque minus doloremque iure magnam, dignissimos expedita ratione ullam velit ea aliquam dolorum amet voluptatum, autem explicabo, facilis omnis accusamus veniam assumenda praesentium provident. Vitae molestias corrupti sint natus quo sed perferendis excepturi tenetur ipsa modi laborum culpa, quae magnam, quod delectus. Minima quam aspernatur, fuga iure corrupti ipsa, qui similique esse autem mollitia natus recusandae nisi eum praesentium maiores incidunt, in facere hic exercitationem doloremque eaque rem. Fugiat vero dignissimos repellat sunt, vel molestias, ratione, tempora esse quisquam nihil hic. Laboriosam, earum. Nemo et eligendi temporibus fuga, sunt tempora nam architecto, culpa iusto placeat quibusdam? Voluptas totam, quae aliquam tempore voluptates, hic beatae dolores ad soluta nostrum saepe ipsa non fugit officia voluptatum quisquam tenetur sit eum. Expedita deserunt soluta eveniet saepe aspernatur id reiciendis fuga dolore sed doloremque vero commodi ut voluptates adipisci, ea voluptatem officiis molestias? Quasi, itaque doloribus aliquam officia saepe, odit commodi. Nostrum quo aspernatur nemo mollitia dignissimos, doloribus odio, recusandae minima nisi ipsum accusantium harum quibusdam, voluptate alias voluptatibus, ab. Asperiores numquam nesciunt totam culpa delectus. Laudantium maxime, tenetur amet qui reprehenderit! Soluta placeat temporibus illo. Suscipit molestiae, rerum eveniet fugit officia voluptates fuga expedita, laborum odio consequatur saepe alias earum dolorem! Sunt ratione, beatae suscipit a accusantium perferendis nesciunt, optio eligendi? Assumenda odit illo accusantium animi veritatis molestiae totam consequatur, mollitia fugit quam, quo voluptates rem voluptatem voluptatum doloribus. Itaque quaerat, architecto reprehenderit nihil hic eaque quibusdam totam illo ad maiores blanditiis. Necessitatibus, nostrum aperiam error nemo aliquam quos, soluta enim excepturi officiis. Possimus iste perferendis repellendus, et eum laudantium distinctio consequuntur totam quasi cupiditate accusamus commodi consequatur dicta, ullam voluptates debitis obcaecati voluptate quod pariatur veritatis maiores? Repellat rem cupiditate fugit quos. Repellat autem porro voluptatum quos nobis! Dolorem doloribus eos natus totam dolores assumenda, modi aperiam harum adipisci, quo, laborum delectus quas iure, ab? Possimus minima, officia nobis expedita magni non cum illo ipsum vitae molestias dolores quae quibusdam magnam adipisci nostrum sint ducimus, veritatis quis maxime architecto, impedit quia cumque fugit explicabo, eos! Nesciunt vero deserunt quidem unde perferendis, illo itaque debitis iusto error rem maiores ad, possimus sed. Tempore beatae laudantium at alias et nesciunt, eius explicabo quae excepturi temporibus similique magnam, quod fuga sint sit quo a rem, inventore molestiae consectetur accusantium, hic ut reprehenderit facere ducimus. Consequuntur aliquid, quae officiis deserunt itaque saepe, quisquam impedit nostrum a reprehenderit repellat libero ex porro, explicabo vero nemo ea nobis asperiores sapiente, placeat nam. Facilis recusandae culpa sit, numquam officia, molestiae, consequatur deserunt provident atque dicta explicabo tenetur cupiditate ducimus perspiciatis eum optio similique dolor veritatis in qui fugiat minus. Rerum, recusandae, fuga! Nisi aliquid, provident laudantium autem voluptas dolores, ex doloremque voluptatibus fugit eligendi maiores iusto eos. Necessitatibus quis harum eos officiis at vel impedit ipsum, suscipit facilis architecto, soluta alias dolorum, distinctio blanditiis cumque quos iure inventore reprehenderit aperiam quidem nam. Blanditiis officiis magni inventore veritatis tenetur cum ipsam nostrum voluptates. Inventore quia dignissimos recusandae ratione accusantium laboriosam omnis facere esse tempore modi facilis voluptas, veniam sunt enim nisi voluptatum, dolores quam culpa odio, dolore autem. Et laudantium, iusto in inventore assumenda aspernatur illo fuga consequatur ea, deserunt, labore ratione rerum quaerat dignissimos ad repudiandae? Sapiente optio accusamus veniam perspiciatis eum soluta nihil doloremque delectus incidunt? Dolores mollitia fuga eligendi magni? Ad, cupiditate, laudantium at, nemo totam esse minima consectetur, minus dolor qui ex reiciendis voluptatibus. Asperiores, quidem, saepe. Hic sunt rerum quos sed, aliquid dignissimos animi doloremque ipsa adipisci dolor numquam quibusdam veritatis vitae neque quam beatae repellendus ratione suscipit, quisquam nostrum, placeat, reprehenderit dolorum. Ducimus tenetur, doloremque illo saepe eveniet. Dolorem commodi dolore illo magnam molestias veritatis non nulla vitae maiores officiis distinctio iure eos perspiciatis exercitationem, nisi optio, explicabo perferendis, aliquam harum earum culpa. Illum, ipsam perspiciatis voluptate, dolore veritatis voluptas expedita quidem amet, adipisci quos dicta facere. Consectetur officia facilis ut maiores dicta ducimus nobis omnis ad magnam quidem officiis iure optio explicabo, possimus, soluta molestiae unde, architecto reprehenderit animi obcaecati, dolorum. Dignissimos, commodi deleniti assumenda, fugiat quam incidunt ipsum. Illum quibusdam nihil blanditiis. Rem harum, totam non, recusandae amet maiores dolorum, sed dolores animi voluptatem, ipsa quam. Officia earum libero necessitatibus tenetur aliquid soluta reprehenderit, ipsam id accusantium repudiandae ratione fugiat placeat eligendi atque expedita voluptas eos quibusdam incidunt illo sequi, odit. Aspernatur corporis blanditiis dolor itaque maiores. Asperiores voluptates, quo quidem, deserunt voluptas adipisci fugit ad cumque eius dolores delectus accusamus obcaecati consequuntur magnam eveniet quasi possimus quod sapiente! Molestiae enim eaque in, explicabo reprehenderit, numquam, qui assumenda consequuntur tempora eligendi tempore, aperiam. Sunt, ad, aliquam! Magni illo assumenda suscipit eveniet ipsa nostrum ullam laudantium minima dolorem officiis iste, veniam magnam aliquam, optio asperiores, reprehenderit!</p>
            
          
!
            
              #bar{
  width:100%;
  height:100px;
  background: url(http://cdn.socket.io/website/imgs/galaxy.jpg);
  position: fixed;
  top:0;
  left:0;
}
p{
  width: 30%;
}
            
          
!
            
              $(window).scroll(function() {
    var x = $(this).scrollTop();
    $('#bar').css('background-position', '0% ' + parseInt(-x) + 'px');
});
            
          
!
999px

Console