Question

我只是想创建一个像http://readwrite.com/这样的视差边栏。

有没有插件？要么这只是这个网站的自定义视差吗？

Answer 1

经过几个小时的实验和编码，我终于想出了一个非常暴露的解决方案，它不依赖于固定位置（或广泛的jQuery插件），而是完全依赖于绝对定位使用已知的偏移量。

实现这一目标的代码：

$(document).ready(function() {

    var origTop = $('#sidebar').offset().top;
    var origBottom = origTop + $('#sidebar').height();

    var scrollDir = 0;
    var scrollLast = 0;

    var weirdOffset = -8;

    $(window).scroll(function() {

        var scrollTop = $(window).scrollTop();
        var scrollBottom = $(window).scrollTop() + $(window).height();
        var curTop = $('#sidebar').offset().top;
        var curBottom = curTop + $('#sidebar').height();

        if(scrollTop > scrollLast) {
            scrollDir = 1;
        } else if(scrollTop < scrollLast) {
            scrollDir = 0;
        }
        scrollLast = scrollTop;

        if(scrollDir == 1) {
            if(scrollBottom >= origBottom && scrollBottom >= curBottom) {
                $('#sidebar').animate({
                    top: scrollBottom -  $('#sidebar').outerHeight() + weirdOffset
                }, 0);
            }
        }

        if(scrollDir == 0) {
            if(scrollTop <= origTop) {

                $('#sidebar').css('top', (origTop + weirdOffset) + 'px');

            } else if(scrollTop <= curTop) {

                $('#sidebar').animate({
                    top: scrollTop + weirdOffset
                }, 0);

            }
        }
    });
});

我唯一注意到的是，由于某种原因，我有一个8px的偏移，我补偿使用weirdOffset变量。仍然不错的快速解决方案，虽然几个月后;）

Answer 2

我还没有看到那样做的，但是有很多插件可以通过在页面上配置它们来快速将它们组合在一起......

看看http://johnpolacek.github.com/scrollorama/它有你可以很快建立起来的功能。

希望这有帮助。

Answer 3

如果您只想以不同的速度滚动项目，某些框架可能会过度。您可以将函数绑定到滚动事件（ $（document）.ready（function（）{}）; ）并通过将滚动值乘以一个预定义的因素。

有几个关于如何执行此操作的教程here和here。

从第一个教程开始，当检测到滚动时调用此函数，并以不同的速度移动绝对定位的元素，给出深度和透视感：

function parallaxScroll(){
    var scrolled = $(window).scrollTop();
    $('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');
    $('#parallax-bg2').css('top',(0-(scrolled*.5))+'px');
    $('#parallax-bg3').css('top',(0-(scrolled*.75))+'px');
}

这可能是一个更简单的解决方案：）

视差侧边栏滚动

3 个答案: