0

我遵循了Code.tutsplus 上的 Parallax 教程，还看到了一些与此类似的其他内容。但是，由于某种原因，没有一个教程可以完美运行，因为总是在元素的顶部或底部创建一些空白区域。

因此，我决定更改代码以根据元素的高度和视差效果的速度来获取元素的“背景大小”属性。但它仍然无法正常工作并在底部创建空白空间。

请检查我的代码，让我知道可能出了什么问题：

$('.parallax').each(function(){

    var $el = $(this),
        speed = $el.data('speed'),
        elHeight = $el.outerHeight(),
        wHeight = $(window).height(),
        elOffset = $el.offset().top;

    //Taking into account the amount the background would move and putting that into
    //background-size so there are no white spaces.
    var extraSize = (elHeight*speed)+elHeight;
    var percentage = (extraSize/elHeight)*100;
    $el.css({'background-size': percentage+'%'+' '+percentage+'%'});


    $(window).scroll(function() {
        var diff = $(window).scrollTop() + wHeight - elOffset;

        var yPos = -(diff*speed);
        var coords = '50% '+ yPos + 'px';
        $el.css({ backgroundPosition: coords });
    });
});

这里也是css：

.parallax {
    background-image: url('http://lorempixel.com/1366/500');
    background-position: 50% 0;
    background-repeat: no-repeat;
}

请让我知道我在这里做错了什么。谢谢

4

0 回答 0