alternate body classes w/ CSS transitions

3 states, initial, red & blue

by Ian Roberts

HTML

<div id="header_nav">nav here</div>

CSS

body {
    height:1000px;
    width:100%;
    background:#eaeaea;
}

#header_nav {
    width:100%;
    height:100px;
    background-color:#666;
    position:fixed;
    top:100px;
    left:0;
}
.red #header_nav {
height:40px;
top:0px;
}
.blue #header_nav {
height:100px;
top:100px;
}
#header_nav {}
body.blue {background:blue;}
body.red {background:red;}
.red #header_nav {
color:#fad400;
}
.red, .blue, #header_nav {
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

JavaScript

$(function(){
    $('body').data('size','blue');
});

$(window).scroll(function(){
    if($(document).scrollTop() > 0)
    {
        if($('body').data('size') == 'blue')
        {
            $('body').data('size','red');
            $('body').removeClass('blue');
            $('body').addClass('red');
        }
    }
    else
    {
        if($('body').data('size') == 'red')
        {
            $('body').data('size','blue');
            $('body').removeClass('red');
            $('body').addClass('blue');
        }  
    }
});