Question

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

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

我在背景上添加了一些颜色以查看错误。图像需要变满，与前两个部分相同。

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

    });

});

Answer 1

问题在于背景的大小。我也整理了你的宽度声明。你应该在px然后用max-width: 100%;设置一个wid，以确保窗口调整大小没有溢出和可伸缩性

DEMO http://jsfiddle.net/kevinPHPkevin/JnncN/1/

Answer 2

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

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

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

2 个答案: