0

我正在网站上制作 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

    });

}); 
4

2 回答 2

0

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

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

于 2013-08-08T17:36:57.047 回答
0

第 3 节有问题,路径未定义。其余部分 ID 工作正常。请检查您网站的代码

<ul id="nav">
        <li><a href="#home" title="Home">Home</a></li>
        <li><a href="#produtos" title="Produtos">Produtos</a></li>
        <li><a href="#empresa" title="Empresa">Empresa</a></li>
        <li><a href="" title="Vendas On-line">Vendas On-line</a></li>
        <li><a href="#contato" title="Contato">Contato</a></li>
</ul>

在以下部分中未定义 href="" 的路径

<li><a href="" title="Vendas On-line">Vendas On-line</a></li>
于 2014-02-18T07:52:16.310 回答