JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️
<header class="scroller"></header>
<main>
<h1>Content Must Be Longer Than The Viewport Height or This Makes No Sense.</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum a natus, praesentium nesciunt recusandae excepturi qui debitis optio enim eligendi iusto quos animi. Soluta neque ad eos itaque debitis.</div>
<div>Quidem minus deserunt reiciendis temporibus quisquam! Eaque illum eligendi, perspiciatis ea animi pariatur dolores necessitatibus aliquam quos esse autem rerum possimus culpa neque sit sapiente accusantium odio! Dicta, facilis, earum.</div>
<div>Sequi, doloribus tempora sit odit dolorum, aliquam inventore. Qui libero ea iure velit iste impedit, corrupti est. Recusandae, est inventore explicabo quis accusamus ipsam repellendus nostrum soluta ad. Enim, voluptatem.</div>
<div>Eum beatae placeat voluptate. Iste pariatur aspernatur expedita voluptates, eius exercitationem nisi ratione sapiente sunt sint quo nihil sit repellendus veniam provident ea debitis atque similique iure vitae fugiat. Pariatur!</div>
<div>Dolores sunt voluptatibus qui maxime distinctio, repellendus iure animi assumenda, perferendis minima amet doloribus odit recusandae, magnam doloremque dolorum quae quas expedita ab laborum rerum mollitia. Commodi voluptatum, deleniti fugiat.</div>
<div>Minima voluptate ut facere officiis, perferendis rem beatae et tempore aperiam debitis, vel sequi asperiores placeat repellendus fuga? Dolorem, maxime eveniet, inventore excepturi fugit molestias sed minus natus placeat numquam?</div>
<div>Quam dignissimos saepe vero omnis quidem, voluptatum nisi consequatur fugiat, veniam quo, ea. Fuga ut ducimus, libero doloremque corporis labore voluptas nulla modi qui voluptate, alias fugit dignissimos quibusdam odit!</div>
<div>Nisi totam nesciunt error magnam fugit enim possimus earum commodi! Nesciunt provident deserunt totam officiis cumque consequatur ex dolorem! Accusantium mollitia laboriosam beatae perferendis ab quibusdam dolor veniam nobis amet.</div>
<div>Voluptatem voluptates officiis fuga, dolore eveniet ab praesentium doloremque numquam cum magni sapiente quaerat ea voluptatum quae explicabo similique cumque veniam id blanditiis velit itaque quidem temporibus. Illo, consequatur, doloremque.</div>
<div>Nam, omnis. Sit, dolore quia, sunt consequatur commodi alias quo repudiandae ab, rem accusantium, in molestiae. Voluptate possimus quas fugiat totam esse dignissimos! Odit quasi accusamus, iure laudantium id corporis?</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum a natus, praesentium nesciunt recusandae excepturi qui debitis optio enim eligendi iusto quos animi. Soluta neque ad eos itaque debitis.</div>
<div>Quidem minus deserunt reiciendis temporibus quisquam! Eaque illum eligendi, perspiciatis ea animi pariatur dolores necessitatibus aliquam quos esse autem rerum possimus culpa neque sit sapiente accusantium odio! Dicta, facilis, earum.</div>
<div>Sequi, doloribus tempora sit odit dolorum, aliquam inventore. Qui libero ea iure velit iste impedit, corrupti est. Recusandae, est inventore explicabo quis accusamus ipsam repellendus nostrum soluta ad. Enim, voluptatem.</div>
<div>Eum beatae placeat voluptate. Iste pariatur aspernatur expedita voluptates, eius exercitationem nisi ratione sapiente sunt sint quo nihil sit repellendus veniam provident ea debitis atque similique iure vitae fugiat. Pariatur!</div>
<div>Dolores sunt voluptatibus qui maxime distinctio, repellendus iure animi assumenda, perferendis minima amet doloribus odit recusandae, magnam doloremque dolorum quae quas expedita ab laborum rerum mollitia. Commodi voluptatum, deleniti fugiat.</div>
<div>Minima voluptate ut facere officiis, perferendis rem beatae et tempore aperiam debitis, vel sequi asperiores placeat repellendus fuga? Dolorem, maxime eveniet, inventore excepturi fugit molestias sed minus natus placeat numquam?</div>
<div>Quam dignissimos saepe vero omnis quidem, voluptatum nisi consequatur fugiat, veniam quo, ea. Fuga ut ducimus, libero doloremque corporis labore voluptas nulla modi qui voluptate, alias fugit dignissimos quibusdam odit!</div>
<div>Nisi totam nesciunt error magnam fugit enim possimus earum commodi! Nesciunt provident deserunt totam officiis cumque consequatur ex dolorem! Accusantium mollitia laboriosam beatae perferendis ab quibusdam dolor veniam nobis amet.</div>
<div>Voluptatem voluptates officiis fuga, dolore eveniet ab praesentium doloremque numquam cum magni sapiente quaerat ea voluptatum quae explicabo similique cumque veniam id blanditiis velit itaque quidem temporibus. Illo, consequatur, doloremque.</div>
<div>Nam, omnis. Sit, dolore quia, sunt consequatur commodi alias quo repudiandae ab, rem accusantium, in molestiae. Voluptate possimus quas fugiat totam esse dignissimos! Odit quasi accusamus, iure laudantium id corporis?</div>
</main>
$scroller-height: 6px;
$scroller-color: #c69;
$scroller-background: #ddd;
$body-background: white;
html,body {
margin: 0;
}
.scroller {
position: fixed;
top: 0;
height: 0;
width: 100%;
background: $body-background;
}
main {
margin-top: 0;
}
body {
background: linear-gradient(to right top,
$scroller-color 50%,
$scroller-background 50%);
//6px = height of scroller but calc won't work with variables
background-size: 100% calc(100% - 100vh + #{-$scroller-height});
background-repeat: no-repeat;
}
body:before {
content:'';
position: fixed;
top: $scroller-height;
bottom: 0;
width: 100%;
z-index: -1;
background: $body-background;
}
// additional styling
main {
font-family: monospace;
max-width: 50%;
margin: 0 auto;
font-size: 1.5em;
h1 {
color: #c69
}
div {
margin-bottom: 1em;
}
}
Also see: Tab Triggers