我正在尝试在基础网站中使用jquery创建视差滚动，所以我绝对定位每一行，给它一个z-index和一个动态的“top：”
因为它，我失去了网格的东西。多列行在左侧仍然具有正确的间距，但在拉伸窗口时将无限扩展到右侧。我想知道是否有办法恢复正确的网格居中和缩放？
我已经尝试将绝对定位的div放在行外，行内，列中......没有运气。
plax = [
{"i": "title", "t":50, "d":60},
{"i": "portrait", "t":0, "d":50},
{"i": "client-logos", "t":550, "d":60},
{"i": "contact", "t":350, "d":55},
{"i": "case-studies", "t":1000, "d":10},
{"i": "bio", "t":1400, "d":20}
];
$window = $(window);
$(function(){
$.each(plax, function(){
eyedee = "#" + this['i'];
$(eyedee).addClass("plax");
m = mathIt(this['d'],this['t']); // this figures out the position of this element from top
$(eyedee).css({"top":m,"z-index":-this['d']});
console.log(m);
})
$window.scroll(function(){
$.each(plax, function(){
eyedee = "#" + this['i'];
m = mathIt(this['d'],this['t']);
// m = this['t'] * -(this['d']-50) * factor * -$(window).scrollTop() + this['t'];
$(eyedee).css("top",m);
})
$("#client-logos").css("background-position",$window.scrollTop() + "px top");
})
function mathIt(d, t) {
return ((((d - 50) * 2) / 100) * $(window).scrollTop()) + t;
}
}).plax { position: absolute;}
<div class="row">
<div class="medium-12 small-6 columns">
<div id="title">
<h1>scot<span>nery</span></h1>
<h2>live entertainment expert</h2>
<h4>producer - consultant - performer</h4>
</div>
</div>
</div>
<div class="row">
<div class="small-9 small-offset-3">
<div id="portrait">
<img src="img/scot-portrait.png" alt='scot nery'/>
</div>
</div>
</div>
<div id="contact">
<div class="row">
<div class="columns small-10">
<button class="button hollow ghost large">Work <span class="hide-for-medium">w/</span><span class="show-for-medium">with</span> Scot <i class="material-icons">add_circle</i></button>
</div>
</div>
</div>
<div id="client-logos">
<div class="row columns">
<h4 style="margin-top: -1em; color: #666;font-weight:700;">trusted by <i class="material-icons">arrow_downward</i></h3>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div id="case-studies" style="">
<div class="row">
<div class="columns medium-3" >
<div class="card">
<div class="card-divider">
Code Conference
</div>
<img src="img/case-code.png">
<div class="card-section">
<h4>Top-Shelf Entertainers</h4>
<p>For its exclusive, star-studded tech conference, Vox called on Scot to provide stellar entertainment for the after party. His network of entertainers brought together an evening that was celebratory and classy.</p>
</div>
</div>
</div>
<div class="columns medium-3" >
<div class="card">
<div class="card-divider">
Lightning in a Bottle
</div>
<img src="img/case-lib.png">
<div class="card-section">
<h4>Connection + Comedy</h4>
<p>Production company Do LaB wants to give their 25,000 attendees true, rich, heartfelt experiences. Scot was invited to create the impossible - an entertaining dating show where shy people felt safe to connect.</p>
</div>
</div>
</div>
<div class="columns medium-3" >
<div class="card">
<div class="card-divider">
Mattel
</div>
<img src="img/case-mattel.png">
<div class="card-section">
<h4>Brand Celebration</h4>
<p>Mattel wanted a custom performance to mark the successful launch of one of their top board games. They needed team entertainment that showed the competitive and over-all joyful feel of actual game play. Scot delivered.</p>
</div>
</div>
</div>
<div class="columns medium-3" >
<div class="card">
<div class="card-divider">
Scot Nery's Boobie Trap
</div>
<img src="img/case-boobie.png">
<div class="card-section">
<h4>Theatrical Success</h4>
<p>For 110 consecutive weeks in L.A., Scot has been producing, booking, hosting, and promoting a circus/ variety show with world-class acts every single Wednesday. It has critical acclaim and ★★★★★ on Yelp!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="bio">
<div class="row">
<div class="medium-7 columns">
<div class="callout" >
<p> Bacon ipsum dolor sit amet do tail pork chop fugiat. Pig mollit beef ribs, duis chuck capicola ullamco. Bresaola pork chop enim, biltong pork belly cillum tenderloin excepteur eiusmod. Ribeye turkey bresaola magna venison ground round, pig corned beef. Sirloin aliquip filet mignon, pork chop beef ribs shoulder capicola tongue. Exercitation spare ribs in pork loin meatball. Minim exercitation brisket, irure eu culpa voluptate filet mignon id bacon consectetur biltong ground round ea incididunt.
Turkey short ribs elit in. In sed ullamco chuck, rump short loin veniam sirloin. Dolor incididunt ut pork chop, shankle in nulla fatback. Nostrud tail beef swine, meatloaf sirloin esse. Boudin aute officia, bacon pariatur aliqua in fatback tempor sed duis pork belly frankfurter. In tri-tip shank rump, filet mignon aliquip pastrami in adipisicing tenderloin pariatur dolore. Laboris velit sunt, capicola cillum fatback short loin bresaola.
Swine kielbasa sed ullamco, elit eu bresaola proident strip steak eiusmod in ribeye non. Jowl tenderloin strip steak aliqua ullamco, occaecat leberkäse non ut pork loin excepteur meatball. Consectetur prosciutto spare ribs, in est tempor corned beef leberkäse fatback. Labore tail consequat in. Filet mignon turkey sunt non id ex kielbasa, in shank. Corned beef tempor quis, salami veniam biltong fatback rump filet mignon reprehenderit jerky spare ribs duis magna swine. Ullamco pork hamburger, sed leberkäse frankfurter reprehenderit occaecat cillum strip steak shank.</p>
</span>
</div>
</div>
</div>
</div>