parallax_easy

by Milos Zivkovic

HTML

<div id="background"></div>
<nav id="nav">Nav</nav>
<div id="content">Content</div>

CSS

body {
    margin: 0;
}

#nav {
    margin: 0;
    height: 50px;
    background: #fff;
    position: relative;
}

#content {
    margin: 300px 0 0 0;
    height: 600px;
    background: #fff;
    position: relative;
}

#background {
    background: url('http://placekitten.com/g/600/350');
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 350px;
}

JavaScript

$(function() {
    $(window).on('scroll', function() {
        $('#background').css('margin-top', $(window).scrollTop() * -.3);
    });
});