我正在使用视差滚动，目前有一个设置，使我的背景图像以正常内容滚动速度的 50% 滚动。见这里：www.jurbs.com。（内容在 Chrome 和 Opera 中进行了优化）
理想情况下，我希望图像中根本没有滚动，但随着内容的滚动，图像的可见性会相应地滑动和进步。这方面的例子可以在这里看到：www.tooyoungtowed.org。
这是相关的CSS：
#content {
z-index: 4;
position: relative;
max-width: 940px;
padding: 0 10px;
margin: 0 auto;
line-height: 1.7;
}
#content article {
width: 300px;
}
#firstbox ,
#secondbox,
#thirdbox,
#fourthbox {
padding-top: 105px;
}
#firstbox {
position: absolute;
top: 0px;
left: 730px;
}
#secondbox {
position: absolute;
top: 2120px;
left: 730px;
}
#thirdbox {
position: absolute;
top: 4240px;
left: 730px;
}
#content h1 {
margin: 0 0 25px 0;
font-size: 60px;
font-family: Helvetica, sans-serif;
font-weight: bold;
line-height: 65px;
}
#fourthbox {
position: absolute;
top: 6360px;
left: 730px;
}
p.whitetext{
color:#fff;
}
#parallax-bg3 {
z-index: 3;
position: fixed;
top: 0;
left: 50%;
height: 1080px;
width: 100%;
max-width: 1920px;
margin-left: -960px;
}
#bg3-1 {
position: absolute;
top: 0px;
}
#bg3-2 {
position: absolute;
top: 1060px;
}
#bg3-3 {
position: absolute;
top: 2120px;
}
#bg3-4 {
position: absolute;
top: 3180px;
}
和 parallax.js：
$(document).ready(function() {
redrawDotNav();
/* Scroll event handler */
$(window).bind('scroll',function(e){
parallaxScroll();
redrawDotNav();
});
/* Next/prev and primary nav btn click handlers */
$('a.firstbox').click(function(){
$('html, body').animate({
scrollTop:0
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
return false;
});
$('a.secondbox').click(function(){
$('html, body').animate({
scrollTop:$('#secondbox').offset().top
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
return false;
});
$('a.thirdbox').click(function(){
$('html, body').animate({
scrollTop:$('#thirdbox').offset().top
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
return false;
});
$('a.fourthbox').click(function(){
$('html, body').animate({
scrollTop:$('#fourthbox').offset().top
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
return false;
});
/* Show/hide dot lav labels on hover */
$('nav#primary a').hover(
function () {
$(this).prev('h1').show();
},
function () {
$(this).prev('h1').hide();
}
);
});
/* Scroll the background layers */
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');
$('#parallax-bg2').css('top',(0-(scrolled*.5))+'px');
$('#parallax-bg3').css('top',(0-(scrolled*.5))+'px');
}
/* Set navigation dots to an active state as the user scrolls */
function redrawDotNav(){
var section1Top = 0;
// The top of each section is offset by half the distance to the previous section.
var section2Top = $('#secondbox').offset().top - (($('#thirdbox').offset().top - $('#secondbox').offset().top) / 2);
var section3Top = $('#thirdbox').offset().top - (($('#fourthbox').offset().top - $('#thirdbox').offset().top) / 2);
var section4Top = $('#fourthbox').offset().top - (($(document).height() - $('#fourthbox').offset().top) / 2);;
$('nav#primary a').removeClass('active');
if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
$('nav#primary a.firstbox').addClass('active');
} else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){
$('nav#primary a.secondbox').addClass('active');
} else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){
$('nav#primary a.thirdbox').addClass('active');
} else if ($(document).scrollTop() >= section4Top){
$('nav#primary a.fourthbox').addClass('active');
}
}