gpt4 book ai didi

jquery - 视差滚动仅适用于少数部分

转载 作者:行者123 更新时间:2023-11-28 12:32:48 25 4
gpt4 key购买 nike

我正在网站上制作 Pallarax 滚动效果。如果我放 3 个或更多 section,效果是完全错误的......使用 2 个 section 效果完美。有什么问题吗?

可以在这里看到效果:http://www.alsite.com.br/parallax

JSFIddle 在这里:http://jsfiddle.net/JnncN/

我在背景上放了一些颜色来查看错误。图片需要完整,与前两部分相同。

我的 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

});

});

最佳答案

问题是背景的大小。我还整理了您的宽度声明。您应该在 px 中设置一个宽度,然后设置一个 max-width: 100%; 以确保窗口大小调整时不会溢出和可伸缩性

演示 http://jsfiddle.net/kevinPHPkevin/JnncN/1/

关于jquery - 视差滚动仅适用于少数部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18132211/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com