alternate body classes w/ CSS transitions

2 states, initial & scroll

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;
}
.scroll #header_nav {
height:40px;
top:0px;
}
body.scroll {background:red;}
.scroll #header_nav {
color:#fad400;
}
.scroll, #header_nav {
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

JavaScript

$(function(){
    $('body').data('scrolled','initial');
});

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