视差侧边栏滚动答案

【问题标题】：Parallax sidebar scrolling视差侧边栏滚动
【发布时间】：2012-10-25 23:25:27
【问题描述】：

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

有没有插件呢？或者这只是这个网站的自定义视差吗？

【问题讨论】：

视差是什么意思？
那么这个效果叫什么名字？
你说得对，是视差。

标签： jquery scroll parallax

【解决方案1】：

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

查看它的实际效果：http://jsfiddle.net/LntUP/

实现它的代码：

$(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 的偏移量，我使用奇怪的Offset 变量进行了补偿。仍然不错的快速解决方案，尽管几个月后;）

【讨论】：

【解决方案2】：

我还没有见过这样的插件，但是有许多插件可以通过在页面上进行配置来快速组合在一起...

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

希望这会有所帮助。

【讨论】：

【解决方案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');
}

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

【讨论】：