Change the background of a div according to Scroll

Notice that there is a background image in div#bar . If you increase% w / w% of it from height to something like 7px , you can understand how the image moves. Still keeping an eye on this 100px , we notice that, as happens with the scroll, the inline style property div#bar changes. To replicate such an effect, just link an event to the window scroll, something like (using jQuery):

$(window).scroll(function() {
    var x = $(this).scrollTop();
    $('#bar').css('background-position', '0 ' + parseInt(-x) + 'px');
});

See working here