我一直试图建立一个像这个网站上的视差效果的网站：
http://www.sparksandhoney.com/the-open-agency-index/
要么
http://www.sparksandhoney.com/press-index/
http://www.sparksandhoney.com/the-open-agency-index/
要么
http://www.sparksandhoney.com/press-index/
我一直在尝试使用stellar.js,但我似乎无法使导航栏和网页同步滚动图像这个网站.到目前为止,我一直在努力使导航栏和文本层成为一个在固定背景上滚动的div,但这根本不起作用？
顺便说一句,我已经浏览了这个网站的源代码,他们使用的是Squarespace,但是我试图在没有它的情况下做到这一点.
有没有人有任何想法？
解决方法
它实际上非常简单.导航和内容容器在流程中.内容具有margin-top以将其与nav分开.然后将背景图像设置为位置：固定,并且在滚动上偏移滚动位置的百分比(例如,30％).
您不需要任何库,但jQuery使它更容易.考虑到stellar.js需要jQuery,我假设你使用它没有问题.在这种情况下,以下代码足以让它为您工作：
$(window).on('scroll',function() {
$('#background').css('margin-top',$(window).scrollTop() * -.3);
});
这是整个行动的jsFiddle：http://jsfiddle.net/9gK9z/1/
