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

我试图创造一种效果，当你滚动时，一个滑块图像会随着页面向下滚动，速度较慢。这类似于视差，一个好的演示应该是这个站点：

如果你向下滚动页面，你可以看到我所说的效果

我的应用程序是类似的，但我有一个标题是不固定的。代码如下：

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

，以便当您到达滑块顶部时，不会出现跳转-它只是开始向下滚动，但速度与页面其余部分不同

---

重申一下，我需要滑块以低于页面其余部分的速度滚动，因此我使用上述技术通过设置其“顶部”位置来“伪造”，该位置由当前

pageYOffset

计算。有什么想法吗？

这取决于标记设置的方式。在站点上，您已经显示了它们有一个绝对定位的div，并且它们被调整为最高值。我假设您也在使用类似的html/css结构。如果是，请尝试：

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

---

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

FYI，我看不到链接站点上的“视差”效果。对我来说，一切似乎都是一样的。我不确定我是否在网站上见过这种效果。现在我很好奇，你能找到一个更好的链接吗？看看滑块相对于网站其他部分的滚动速度。可以说，这不是“视差”，而是一种类似的效果。你看到了吗？