Parallax sidebar scrolling

问题

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?

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

回答2:

I have not seen one that does just that, but there are a number of plugins out there that you could put this together pretty quickly by configuring them on your page...

Take a look at http://johnpolacek.github.com/scrollorama/ it has features you could build this with pretty quickly.

Hope this helps.

回答3:

If you just want to scroll items at different speeds some frameworks may be overkill. You can bind a function to the scroll event ($(document).ready(function(){});) and manually set top positions by multiplying the scroll value by a pre-defined factor.

There are a couple of tutorials on how to do this here and here.

From the first tutorial, this function is called when scrolling is detected and moves absolutely positioned elements at different speeds, giving a sense of depth and perspective:

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

It may be a simpler solution :)

来源：https://stackoverflow.com/questions/13078800/parallax-sidebar-scrolling

标签

jquery

scroll

parallax