0

我正在尝试创建一种效果，当您滚动时，滑块图像将随着页面向下滚动，速度较慢。这类似于视差，一个很好的演示是这个站点： 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();
});

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

重申一下，我需要滑块以比页面其余部分更慢的速度滚动，因此我使用上述技术通过设置其“顶部”位置来“伪造”，该位置由当前pageYOffset. 有任何想法吗？

4

1 回答 1

0

这将取决于您如何设置标记。在您展示的网站上，它们具有绝对定位的 div 并且它们已调整为最高值。我假设您正在使用类似的 html/css 结构做同样的事情。如果是这样，请尝试：

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

根据您认为合适的方式调整“/3”以调整速度。

于 2013-05-17T14:43:35.873 回答