jQuery addClass example

Change class name on click in jQuery

HTML

<div class="section-1" id="container">
    Lets start!
</div>
<div class="container section-2">
    There is more cool stuff below...
</div>
<div class="container section-3">
    We are done with cool things!
</div>

CSS

.container, #container {
    padding:200px 20px 200px 20px;
    text-align:center;
    color:#FFF;
    font-weight:bold;
}
.section-1{
    background:url(https://www.logaster.ru/blog/wp-content/uploads/2014/06/img_514.png), url(http://static4.wikia.nocookie.net/__cb20130612023354/harrypotter/images/d/d1/Gradient-blue-background.jpg);
    background-position:center,center;
}
.section-2{
    background-image:url(http://th00.deviantart.net/fs49/PRE/f/2009/207/e/d/Orange_Desktop_Background_by_The_Dogfather.png);
    background-position:center;
}
.section-3{
    background-image:url(http://oaklandbaptist.org/media/Green-Background.jpg);
    background-position:center;
}

JavaScript

// Y axis scroll speed
var velocity = 0.5;

function update(){ 
    var pos = $(window).scrollTop(); 
    $('.container').each(function() { 
        var $element = $(this);
        var height = $element.height()-18;
        $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px'); 
    }); 
    $('#container').css('backgroundPosition', '50% ' + Math.round(($('#container').height() - pos) * velocity) + 'px' + '50% ' + Math.round(($('#container').height() - pos/2) * velocity) + 'px'); 
};

$(window).bind('scroll', update);