Change the background of a Scroll div

Question

Hello, I’ve tried several ways but so far I haven’t been able to create a bar similar to the one on the site http://www.socket.io that moves as the page goes down.

*I mean the galaxy bar at the top

Thank you

Answer 1

Realize that there is a background image in div#bar. If you increase the height hers of 7px current for something like 100px, you can understand how the image moves. Still keep an eye on this div#bar, you notice that, as the scroll happens, the inline style property background-position changes. To replicate such an effect, simply attach 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 in operation here