html - How to create parallax effect like this? -

i've been trying build website parallax effect 1 on website: http://www.sparksandhoney.com/the-open-agency-index/ or http://www.sparksandhoney.com/press-index/

i've been trying use stellar.js, can't seem make nav bar , web page scroll in sync on image website. far i've been trying make nav bar , text layer 1 div scrolls on fixed background not working @ all?

by way, i've gone through websites source code, , use squarespace, i'm trying effect without it.

does have ideas?

it's super simple. nav , content containers in flow. content has margin-top separate nav. background image set position: fixed, , on scroll offset percentage of scroll position (eg, 30%).

you don't need libraries, jquery makes easier. considering stellar.js requires jquery, assume don't have problem using it. in case, following code enough working you:

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

here jsfiddle of entire thing in action: http://jsfiddle.net/9gk9z/1/