我正在网站上制作 Pallarax 滚动效果。如果我放 3 或更多section
,效果就完全错误了……用 2section
就完美了。有什么问题?
可以在这里看到效果:http ://www.alsite.com.br/parallax
和这里的 JSFIddle:http: //jsfiddle.net/JnncN/
我在背景上涂上一些颜色以查看错误。图像需要完整,与前 2 部分相同。
我的 HTML:
<body>
<section id="home" data-speed="10" data-type="background">
<article>I am Absolute Positioned</article>
</section>
<section id="produtos" data-speed="4" data-type="background">
<article>I am Absolute Positioned</article>
</section>
<section id="empresa" data-speed="3" data-type="background">
<article>I am Absolute Positioned</article>
</section>
<section id="contato" data-speed="6" data-type="background">
<article>I am Absolute Positioned</article>
</section>
</body>
脚本:
$(document).ready(function(){
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});