视差侧边栏滚动

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

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

Answer 1

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

请参阅以下url ： 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的偏移，我补偿使用weirdOffset变量。 仍然不错的快速解决方案，虽然几个月后;）

Answer 2

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

看看http://johnpolacek.github.com/scrollorama/它有你可以快速构建它的function。

希望这可以帮助。

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

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