Question

我正在尝试创建一种效果，当您滚动时，滑块图像将以较慢的速率向下滚动页面。这类似于视差，这个网站有一个很好的演示：http://escapeflight.com/

如果向下滚动页面，您可以看到我正在谈论的效果。

我的应用程序类似，但我有一个未修复的标题。代码如下：

header = $('header').height();

function setTopSlider(){
    offset = window.pageYOffset;

    //if we have scrolled down past the height of the header, we want to begin the 'parallax' effect
    if(iScroll > header){
        $('.slides').css('top',(offset/3))
    }else{
        $('.slides').css('top',0);
    };
};

$(window).scroll(function () {
    setTopSlider();
});

这样可行，但是当您滚动超过标题的高度时，.slides的css值会跳至计算值。我需要这个计算offset/3的帮助，这样当你到达滑块的顶部时，没有跳跃 - 它只是开始向下滚动，但速度与页面的其余部分不同

重申一点，我需要滑块以低于页面其余部分的速度滚动，所以我使用上述技术通过设置其“顶部”位置来“假装”，这是由当前{ {1}}。有什么想法吗？

Answer 1

这取决于您如何设置标记。在你已经显示的网站上，他们有一个绝对定位的div，他们调整了最高值。我假设你使用类似的html / css结构做同样的事情。如果是这样，请尝试：

$('.slides').css('top' , ((offset - header)/3 ));

根据需要调整“/ 3”以调整速度。

使用jQuery和window.pageYOffset创建基本视差效果

1 个答案: