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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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 class="header" role="banner">
    <nav>
        <ul>
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#">About</a>
            </li>
            <li><a href="#">Portfolio</a>
            </li>
            <li><a href="#">Contact</a>
            </li>
        </ul>
    </nav>
</header>
<div class="container" role="main">
    <h1>Sticky Header</h1>
    <h2>Hides on scroll down, reveals on scroll up</h2>
    <p>Eat a plant, kill a hand shake treat bag. Love to play with owner's hair tie hunt anything that moves, for play riveting piece on synthesizer keyboard for burrow under covers leave dead animals as gifts all of a sudden cat goes crazy, or nap all day. Scratch the furniture inspect anything brought into the house, for hunt by meowing loudly at 5am next to human slave food dispenser swat at dog. Eat and than sleep on your face scamper and hunt anything that moves hunt anything that moves. Curl into a furry donut see owner, run in terror. Bathe private parts with tongue then lick owner's face scratch the furniture but cat snacks, and shove bum in owner's face like camera lens or poop on grasses so purr while eating hack up furballs. Hate dog claw drapes. Mark territory cat snacks jump off balcony, onto stranger's head but see owner, run in terror. Give attitude knock over christmas tree knock over christmas tree chase laser i like big cats and i can not lie. Stick butt in face purr for no reason for chase mice pooping rainbow while flying in a toasted bread costume in space see owner, run in terror nap all day, so chase imaginary bugs. Run in circles chase mice, and chase laser yet attack feet hate dog, yet scamper for play time. Loves cheeseburgers missing until dinner time hiss at vacuum cleaner kick up litter.</p>
    <p>See owner, run in terror. Give attitude chew foot who's the baby stare at the wall, play with food and get confused by dust play time. Shake treat bag all of a sudden cat goes crazy, but missing until dinner time, and all of a sudden cat goes crazy find empty spot in cupboard and sleep all day, and make muffins. Leave dead animals as gifts. Present belly, scratch hand when stroked nap all day. Hunt by meowing loudly at 5am next to human slave food dispenser pooping rainbow while flying in a toasted bread costume in space. Ears back wide eyed see owner, run in terror under the bed, so shove bum in owner's face like camera lens yet find something else more interesting chew foot. Meow all night having their mate disturbing sleeping humans. Claws in your leg plan steps for world domination purr while eating yet chase mice, but poop on grasses, for all of a sudden cat goes crazy, plan steps for world domination. Kick up litter play time love to play with owner's hair tie for bathe private parts with tongue then lick owner's face. Attack feet has closed eyes but still sees you, and chew iPad power cord, but need to chase tail, yet give attitude ears back wide eyed. Leave hair everywhere behind the couch, but make muffins, but chase ball of string.</p>
    <p>Lick butt love to play with owner's hair tie under the bed, or find empty spot in cupboard and sleep all day leave dead animals as gifts, or stand in front of the computer screen. Loves cheeseburgers sun bathe all of a sudden cat goes crazy scratch the furniture yet hide at bottom of staircase to trip human. Stretch meowing non stop for food play time. Then cats take over the world poop on grasses give attitude. Play time always hungry intently stare at the same spot, but rub face on everything, roll on the floor purring your whiskers off. Always hungry spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce meowing non stop for food yet chase ball of string. Lick butt meow all night having their mate disturbing sleeping humans but leave dead animals as gifts poop on grasses so sleep nap hunt by meowing loudly at 5am next to human slave food dispenser but play time. Find empty spot in cupboard and sleep all day meowing non stop for food for sleep in the bathroom sink. Throwup on your pillow. Eat grass, throw it back up curl into a furry donut need to chase tail.
    </p>
    <p>Eat a plant, kill a hand shake treat bag. Love to play with owner's hair tie hunt anything that moves, for play riveting piece on synthesizer keyboard for burrow under covers leave dead animals as gifts all of a sudden cat goes crazy, or nap all day. Scratch the furniture inspect anything brought into the house, for hunt by meowing loudly at 5am next to human slave food dispenser swat at dog. Eat and than sleep on your face scamper and hunt anything that moves hunt anything that moves. Curl into a furry donut see owner, run in terror. Bathe private parts with tongue then lick owner's face scratch the furniture but cat snacks, and shove bum in owner's face like camera lens or poop on grasses so purr while eating hack up furballs. Hate dog claw drapes. Mark territory cat snacks jump off balcony, onto stranger's head but see owner, run in terror. Give attitude knock over christmas tree knock over christmas tree chase laser i like big cats and i can not lie. Stick butt in face purr for no reason for chase mice pooping rainbow while flying in a toasted bread costume in space see owner, run in terror nap all day, so chase imaginary bugs. Run in circles chase mice, and chase laser yet attack feet hate dog, yet scamper for play time. Loves cheeseburgers missing until dinner time hiss at vacuum cleaner kick up litter.</p>
    <p>See owner, run in terror. Give attitude chew foot who's the baby stare at the wall, play with food and get confused by dust play time. Shake treat bag all of a sudden cat goes crazy, but missing until dinner time, and all of a sudden cat goes crazy find empty spot in cupboard and sleep all day, and make muffins. Leave dead animals as gifts. Present belly, scratch hand when stroked nap all day. Hunt by meowing loudly at 5am next to human slave food dispenser pooping rainbow while flying in a toasted bread costume in space. Ears back wide eyed see owner, run in terror under the bed, so shove bum in owner's face like camera lens yet find something else more interesting chew foot. Meow all night having their mate disturbing sleeping humans. Claws in your leg plan steps for world domination purr while eating yet chase mice, but poop on grasses, for all of a sudden cat goes crazy, plan steps for world domination. Kick up litter play time love to play with owner's hair tie for bathe private parts with tongue then lick owner's face. Attack feet has closed eyes but still sees you, and chew iPad power cord, but need to chase tail, yet give attitude ears back wide eyed. Leave hair everywhere behind the couch, but make muffins, but chase ball of string.</p>
    <p>Lick butt love to play with owner's hair tie under the bed, or find empty spot in cupboard and sleep all day leave dead animals as gifts, or stand in front of the computer screen. Loves cheeseburgers sun bathe all of a sudden cat goes crazy scratch the furniture yet hide at bottom of staircase to trip human. Stretch meowing non stop for food play time. Then cats take over the world poop on grasses give attitude. Play time always hungry intently stare at the same spot, but rub face on everything, roll on the floor purring your whiskers off. Always hungry spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce meowing non stop for food yet chase ball of string. Lick butt meow all night having their mate disturbing sleeping humans but leave dead animals as gifts poop on grasses so sleep nap hunt by meowing loudly at 5am next to human slave food dispenser but play time. Find empty spot in cupboard and sleep all day meowing non stop for food for sleep in the bathroom sink. Throwup on your pillow. Eat grass, throw it back up curl into a furry donut need to chase tail.
    </p>
    <p>Eat a plant, kill a hand shake treat bag. Love to play with owner's hair tie hunt anything that moves, for play riveting piece on synthesizer keyboard for burrow under covers leave dead animals as gifts all of a sudden cat goes crazy, or nap all day. Scratch the furniture inspect anything brought into the house, for hunt by meowing loudly at 5am next to human slave food dispenser swat at dog. Eat and than sleep on your face scamper and hunt anything that moves hunt anything that moves. Curl into a furry donut see owner, run in terror. Bathe private parts with tongue then lick owner's face scratch the furniture but cat snacks, and shove bum in owner's face like camera lens or poop on grasses so purr while eating hack up furballs. Hate dog claw drapes. Mark territory cat snacks jump off balcony, onto stranger's head but see owner, run in terror. Give attitude knock over christmas tree knock over christmas tree chase laser i like big cats and i can not lie. Stick butt in face purr for no reason for chase mice pooping rainbow while flying in a toasted bread costume in space see owner, run in terror nap all day, so chase imaginary bugs. Run in circles chase mice, and chase laser yet attack feet hate dog, yet scamper for play time. Loves cheeseburgers missing until dinner time hiss at vacuum cleaner kick up litter.</p>
    <p>See owner, run in terror. Give attitude chew foot who's the baby stare at the wall, play with food and get confused by dust play time. Shake treat bag all of a sudden cat goes crazy, but missing until dinner time, and all of a sudden cat goes crazy find empty spot in cupboard and sleep all day, and make muffins. Leave dead animals as gifts. Present belly, scratch hand when stroked nap all day. Hunt by meowing loudly at 5am next to human slave food dispenser pooping rainbow while flying in a toasted bread costume in space. Ears back wide eyed see owner, run in terror under the bed, so shove bum in owner's face like camera lens yet find something else more interesting chew foot. Meow all night having their mate disturbing sleeping humans. Claws in your leg plan steps for world domination purr while eating yet chase mice, but poop on grasses, for all of a sudden cat goes crazy, plan steps for world domination. Kick up litter play time love to play with owner's hair tie for bathe private parts with tongue then lick owner's face. Attack feet has closed eyes but still sees you, and chew iPad power cord, but need to chase tail, yet give attitude ears back wide eyed. Leave hair everywhere behind the couch, but make muffins, but chase ball of string.</p>
    <p>Lick butt love to play with owner's hair tie under the bed, or find empty spot in cupboard and sleep all day leave dead animals as gifts, or stand in front of the computer screen. Loves cheeseburgers sun bathe all of a sudden cat goes crazy scratch the furniture yet hide at bottom of staircase to trip human. Stretch meowing non stop for food play time. Then cats take over the world poop on grasses give attitude. Play time always hungry intently stare at the same spot, but rub face on everything, roll on the floor purring your whiskers off. Always hungry spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce meowing non stop for food yet chase ball of string. Lick butt meow all night having their mate disturbing sleeping humans but leave dead animals as gifts poop on grasses so sleep nap hunt by meowing loudly at 5am next to human slave food dispenser but play time. Find empty spot in cupboard and sleep all day meowing non stop for food for sleep in the bathroom sink. Throwup on your pillow. Eat grass, throw it back up curl into a furry donut need to chase tail.
    </p>
    <h2>Header will Reveal on Page Bottom</h2>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

/* Important part, as the javascript will check for this class */

.header {
    width: 100%;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 85px;
    border: none;
    background-color: rgba(255,255,255,1);
    box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
}

/* Demo stuff */

body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.05em;
    background-image: linear-gradient(135deg, rgba(25,118,210,0.9) 0%,rgba(83,109,254,0.9) 100%), url('https://wallpapers.hector.me/wavey/Aqua.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    padding: 10em 0 10em;
    text-align: justify;
}

nav {
    margin: 2em;
}

ul {
    overflow: auto;
    list-style-type: none;
    text-align: center;
}

li {
    height: 20px;
    margin-right: 0px;
    border-right: 1px solid #1976D2;
    padding: 0 20px;
    display: inline;
}

li:last-child {
    border-right: none;
}

li a {
    text-decoration: none;
    color: #BBDEFB;
    font-size: 20px;
    text-transform: uppercase;
    transition: all 0.5s ease;
    display: inline-block;
}

li.active a, li a:hover {
    color: #2196F3;
}

.container {
    width: 100%;
    max-width: 70em;
    padding: 2em;
    margin: 0 auto;
}

h1 {
    font-size: 2em;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}

h2 {
    font-size: 1em;
    color: #fff;
    text-transform: uppercase;
    font-style: italic;
    text-align: center;
}

p {
    font-size: 1em;
    color: #fff;
    margin: 2em 0;
}
              
            
!

JS

              
                // No JS library used

;(function(document, window, index) {
    'use strict';

    var elSelector = '.header',
        element = document.querySelector(elSelector);

    if (!element) return true;

    var elHeight = 0,
        elTop = 0,
        dHeight = 0,
        wHeight = 0,
        wScrollCurrent = 0,
        wScrollBefore = 0,
        wScrollDiff = 0;

    window.addEventListener('scroll', function() {
        elHeight = element.offsetHeight;
        dHeight = document.body.offsetHeight;
        wHeight = window.innerHeight;
        wScrollCurrent = window.pageYOffset;
        wScrollDiff = wScrollBefore - wScrollCurrent;
        elTop = parseInt(window.getComputedStyle(element).getPropertyValue('top')) + wScrollDiff;

        if (wScrollCurrent <= 0)
            element.style.top = '0px';

        else if (wScrollDiff > 0)
            element.style.top = (elTop > 0 ? 0 : elTop) + 'px';

        else if (wScrollDiff < 0) {
            if (wScrollCurrent + wHeight >= dHeight - elHeight)
                element.style.top = ((elTop = wScrollCurrent + wHeight - dHeight) < 0 ? elTop : 0) + 'px';

            else
                element.style.top = (Math.abs(elTop) > elHeight ? -elHeight : elTop) + 'px';
        }

        wScrollBefore = wScrollCurrent;
    });

}(document, window, 0));
              
            
!
999px

Console