如何使此脚本http://razorfish.github.io/Parallax-JS/能够处理此页面上.visual div的背景图片：http://bit.ly/1aWpGFr，其位置为：fixed，以实现spotify.com风格的视差效果？
谢谢！
脚本将视差应用于所有“#content section”标签，而css使它们的高度为100％。但是当我尝试在我自己的布局中使用它时，如果所有div（包括白色div）都是相同的高度，我只能让它工作。而且我无法使用固定的顶杆进行操作。
我的网站代码如下所示，我只想将此脚本中的视差应用于.visual div而不是其他内容。我只是无法弄清楚采取什么方法 - 任何想法？
我的代码：
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>1986 | Product design studio |</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</div>
</div>
<div class="visual"></div>
<div class="wrapper">
<div class="column-left">
<h1>E-Light™</h1>
<p class="intro">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="visual" style="background-image:url(images/visual2.jpg)"></div>
<div class="wrapper">
<div class="column-right">
<h1>Methodology</h1>
<p class="intro">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!--<div class="footer-space"></div>-->
<div class="footer">
<div class="wrapper">
<div class="column">
<h2>Services</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</div>
<div class="column">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</div>
<div class="column">
<h2>Keep in touch</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</div>
<div class="column-last">
<h2>Contact</h2>
<p>
1986
Anders Andersen
Vestergade 12<br />
5000 Odense<br />
Denmark
</p>
</div>
</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset */
@font-face {
font-family: 'bebas_neueregular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('BebasNeue-webfont.woff') format('woff'),
url('BebasNeue-webfont.ttf') format('truetype'),
url('BebasNeue-webfont.svg#bebas_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font-family:Helvetica Neue, Arial, sans-serif;
font-size:12px;
line-height:1.6em;
background-color:#fff;
}
h1, h2, h3, h4, h5, h6, p.intro, .navigation li a {
font-family:"bebas_neueregular", Helvetica Neue, Arial, sans-serif;
}
h1{
font-size:46px;
line-height:46px;
margin-bottom:30px;
}
h2{
color:#fff;
font-size:24px;
margin-bottom:30px;
}
p{
}
p.intro{
color:#787878;
font-size:24px;
line-height:1.2em;
margin-bottom:30px;
}
.header{
width:100%;
position:relative;
float:left;
clear:both;
margin:0px 0px -84px 0px;
background-color: #fff;
background-color:rgba(255,255,255,0.8);
z-index:50;
}
.modernizr-fallback-header{
width:100%;
position:relative;
float:left;
clear:both;
margin:0px 0px -84px 0px;
background-color: #fff;
z-index:50;
}
.logo{
position:relative;
left:50%;
margin-left:-400px;
display:block;
width:64px;
height:64px;
float:left;
background-size:contain;
background-repeat:none;
background-image:url(images/logo.png);
}
.navigation{
position:relative;
left:50%;
width:600px;
height:1%;
overflow:hidden;
text-align:right;
margin:24px 0 16px -200px;
}
.navigation li{
display:inline;
height:1%;
overflow:hidden;
margin-left:30px;
}
.navigation li a, .navigation li a:visited{
display:inline;
color:#000;
font-size:24px;
text-decoration:none;
}
.navigation li a:hover{
color:#777;
animation: myanim 0.7s;
-moz-animation: myanim 0.7s; /* Firefox */
-webkit-animation: myanim 0.7s; /* Safari and Chrome */
-o-animation: myanim 0.7s; /* Opera */
}
@-webkit-keyframes myanim {
0% { color:#000; }
100% { color:#777; }
}
@-moz-keyframes myanim {
0% { color:#000; }
100% { color:#777; }
}
@-o-keyframes myanim {
0% { color:#000; }
100% { color:#777; }
}
@keyframes myanim {
0% { color:#000; }
100% { color:#777; }
}
/* OLD WRAPPER
.wrapper{
width:100%;
position:relative;
float:left;
clear:both;
padding:30px 0px 60px 0px;
z-index:10;
background-color: transparent;
background-image:url(images/whitefade-top.png), url(images/whitefade-bottom.png);
background-repeat:repeat-x;
background-position:top, bottom;
margin-bottom:-160px;
}
*/
.wrapper {
width:100%;
position:relative;
float:left;
clear:both;
padding:30px 0px 45px 0px;
z-index:10;
background-color: transparent;
background-image:url(images/whitefade-top.png), url(images/white.gif), url(images/whitefade-bottom.png);
margin-bottom:-160px;
border-top:160px solid transparent;
border-bottom:160px solid transparent;
background-repeat:
repeat-x,
repeat,
repeat-x;
background-position:
top,
center,
bottom;
background-origin:
border-box,
padding-box,
border-box;
-moz-background-clip: border, padding, border; /* Firefox 3.6 */
-webkit-background-clip: border, padding, border; /* Safari 4? Chrome 6? */
background-clip: border-box, padding-box, border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
}
.visual-top{
position:relative;
left:0px;
width:100%;
height:726px;
float:left;
clear:both;
z-index:1;
margin-bottom:-160px;
background-image:url(images/visual.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background: url(images/visual.jpg) no-repeat center static;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.visual{
position:relative;
left:0px;
width:100%;
height:822px;
float:left;
clear:both;
z-index:1;
margin-bottom:-160px;
background-image:url(images/visual.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background: url(images/visual.jpg) no-repeat center static;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.column-left{
width:600px;
position:relative;
left:50%;
margin:-160px 0 -160px -400px;
}
.column-right{
width:600px;
position:relative;
left:50%;
margin:-160px 0 -160px -200px;
}
.column{
width:180px;
margin-right:20px;
display:block;
float:left;
position:relative;
}
.column-last{
width:180px;
margin-right:0px;
display:block;
float:left;
position:relative;
}
.footer{
width:100%;
background-color:#191919;
height:1%;
position:hidden;
bottom:0px;
float:left;
z-index:0;
}
.footer .wrapper{
background-color:transparent;
width:800px;
left:50%;
margin:160px 0 0 -400px;
background:none;
background-color:transparent;
border:0px;
}
.footer p{
color:#fff;
}
.footer-space{
height:200px;
z-index:-2;
display:block;
float:left;
background:#fff;
width:100%;
margin-bottom:160px;
}