視差容錯

1.背景內容滑動速度與滑動條滑動速度一致【隨着滑動條而滑動】

解決方法：

將background-attachment 屬性設置爲 "scroll"（默認）

實例：

css:

.top1{background:url(../images/xxx.png) no-repeat;}

2.背景內容與滑動條滑動速度(或方向)不一致

解決方法：

將background-attachment 屬性設置爲 "fixed" ，再在js中設置（計算）background-position；【若不設置background-position則背景圖像將固定在設置的原始位置 ，滑動過程中不會發生改變】

實例：

css:
.top1{background:url(../images/xxx.png) no-repeat fixed;}

js:

$('.top1').parallax("50%", -0.1);//50%是x偏移量  -0.1是圖像垂直滑動的速度，負號代表當向下滑動時方向是向下、數值的絕對值越大越快

代碼參考：

page.js

$('.top1').parallax("50%", -0.1);

parallax.js

// JavaScript Document

(function( $ ){
var $window = $(window);
var windowHeight = $window.height();
$window.resize(function () {
windowHeight = $window.height();
});
$.fn.parallax = function(xpos, speedFactor, outerHeight) {
var $this = $(this);
var getHeight;
var firstTop;
var paddingTop = 0;
//get the starting position of each element to have parallax applied to it
$this.each(function(){
firstTop = $this.offset().top;
});
if (outerHeight) {
getHeight = function(jqo) {
return jqo.outerHeight(true);
};
} else {
getHeight = function(jqo) {
return jqo.height();
};
}
// setup defaults if arguments aren't specified
if (arguments.length < 1 || xpos === null) xpos = "50%";
if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
if (arguments.length < 3 || outerHeight === null) outerHeight = true;
// function to be called whenever the window is scrolled or resized
function update(){
var pos = $window.scrollTop();
$this.each(function(){
var $element = $(this);
var top = $element.offset().top;
var height = getHeight($element);
// Check if totally above or totally below viewport
if (top + height < pos || top > pos + windowHeight) {
return;
}
$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
});
}
$window.bind('scroll', update).resize(update);
update();
};
})(jQuery);