shadow on scroll

by bartula

HTML

<div class="header">HEADER!</div>

CSS

.header {font-size:24px; width:100%; height:60px; background:white; position:fixed}
.header.shadow {box-shadow:0px 5px 5px rgba(0,0,0,.5);}

body {height:1000px; }

JavaScript

var header = $('.header');

$(window).scroll(function(e){
    if(header.offset().top !== 0){
        if(!header.hasClass('shadow')){
            header.addClass('shadow');
        }
    }else{
        header.removeClass('shadow');
    }
});