视差边栏滚动 [英] Parallax sidebar scrolling

问题描述

我只想创建一个 http://readwrite.com/之类的视差补充工具栏.

I just want to create a parallax sidebar like http://readwrite.com/.

有没有用于此的插件? 或者 这是仅针对此站点的自定义视差吗?

Is there any plugin for that? or Is that a custom parallax for just this site?

推荐答案

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

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.

在以下位置查看其运行情况: http://jsfiddle.net/LntUP/

See it in action at: 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变量进行补偿.快速解决方案还算不错，尽管已经过了几个月；)

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

这篇关于视差边栏滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！