Shadow header

by vvv vvvv

HTML

<header>
    Don't you love Latin?
</header>

<div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar, ipsum vel sollicitudin feugiat, quam justo porta risus, nec congue nisl nisl id justo. Pellentesque feugiat luctus augue ut molestie. Vestibulum posuere ultrices dui, id ullamcorper elit porttitor ac. Nulla dapibus quam in nibh convallis vel varius lorem tincidunt. Vivamus sed leo non eros tincidunt vestibulum. Vestibulum suscipit vehicula interdum. Fusce sed augue vel ipsum interdum sodales. Fusce eu tortor sed tortor congue porttitor.</p>
    <p>Donec sed aliquet mauris. In aliquam est imperdiet nisi bibendum facilisis. Sed sem est, gravida ut molestie sit amet, ullamcorper ac nunc. Phasellus porta lorem iaculis quam sollicitudin id porttitor nibh placerat. Morbi dictum dui vitae augue lobortis ultrices. Donec congue turpis nec nisi vehicula et ultricies nisl elementum. Fusce tortor mi, faucibus ac pulvinar in, porttitor in dui. Curabitur sit amet egestas est. Maecenas ligula nunc, porta id pharetra vel, interdum et turpis. Nam mi sapien, pretium quis condimentum a, fringilla vel leo.</p>
    <p>Fusce quis bibendum metus. Duis consequat dapibus risus ut condimentum. Integer ut hendrerit arcu. Suspendisse scelerisque lobortis neque, id ultricies massa gravida at. Aenean adipiscing aliquet varius. Donec sed turpis a libero mattis ullamcorper non ac est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Curabitur nec quam sem. Sed eget rutrum mi. Quisque blandit dapibus ligula. Aliquam erat volutpat.</p>
    <p>Ut tincidunt metus sapien. Donec pretium adipiscing magna eleifend commodo. Maecenas et odio porta felis vestibulum eleifend et non nibh. Suspendisse justo mi, pellentesque sed scelerisque id, euismod id tellus. Proin faucibus aliquam metus aliquet placerat. Aliquam eu nulla at sem mollis molestie ac consectetur enim. Nunc at tortor felis, non dignissim libero. Nulla dictum nunc vitae eros...

CSS

body {
    font: 14px/1.5em "Lucida Grande", sans-serif;
    color: rgba(0,0,0,0.7);
}

body > header {
    position: fixed;
    top: 0;
    left: 0;
    padding: 25px 30px;
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
    background-color: #f4f4f4;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 30px;
    font-weight: bold;
    
    /* Transition */
    -webkit-transition: box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out;
}

#content {
    margin-top: 100px;
    padding: 0 30px;
}

#content p + p {
    margin-top: 15px;
}

.shadow {
    border-bottom-color: rgba(0,0,0,.2);
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

JavaScript

//Scroll down, <header> tag will have shadow -- scrollbars are needed!

$(document).ready(function() {

    document.onscroll = function() {

        if ( $(document).scrollTop() > 20 ) {
            $('body > header').addClass('shadow');
        } else {
            $('body > header').removeClass('shadow');
        }

    };

});