jquery - 视差侧边栏滚动

Question

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

有什么插件吗？还是仅此站点的自定义视差？

Answer 1

After a few hours of experimenting and coding, I've finally come up with a very exposed solution that doesn't rely on fixed positions (or extensive jQuery plugins), but rather relies solely on absolute positioning using known offsets.

See it in action at: http://jsfiddle.net/LntUP/

The code that makes it happen:

$(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);

            }
        }
    });
});

The only thing I noticed is that for some reason I have an offset of 8px that I compensate for using the weirdOffset variable. Still not bad quick solution, albeit a few months later ;)

Answer 2

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

看看http://johnpolacek.github.com/scrollorama/它具有您可以很快构建它的功能。

希望这可以帮助。

Answer 3

如果您只想以不同的速度滚动项目，则某些框架可能会矫枉过正。您可以将函数绑定到滚动事件（$(document).ready(function(){});）并通过将滚动值乘以预定义因子来手动设置顶部位置。

这里和这里有几个关于如何做到这一点的教程。

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

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');
}

这可能是一个更简单的解决方案:)