jQuery：滚动手风琴效果

Question

我试图在苹果网站上显示的上下滚动时重现手风琴效果：http://store.apple.com/us/compare/mac?mco=MTg4Mjg5Nzk&page=imac（在任何 Mac 上单击“比较”，然后开始向下滚动）

这就是我所拥有的到目前为止： http://jsfiddle.net/mackry/3KZky/15/

非常复杂看起来一团糟。显然我没有采取正确的方法，我想问是否其他人有更好的方法来有效地编写它。我们将不胜感激！

$(document).ready(function() {
    var schedule = $('#schedule'),
        schedulePos = $('#schedule').offset(),
        page = $('#page'),
        index = 0,
        prevScroll = $(document).scrollTop(),
        margin = schedulePos.top;


    $(window).scroll(function()
    {
        var newScroll = $(document).scrollTop(),
            prof = $('li#professor').eq(index);

        //schedule.html($(document).scrollTop() + '  ' + $(window).scrollTop() + '<br/>Prof #1: ' + prof.offset().top + '<br/>index: ' + index);

        if ($(this).scrollTop() >= schedulePos.top && !schedule.hasClass('fix') && newScroll > prevScroll) {
            schedule.addClass('fix');

        }
        else if ($(this).scrollTop() < schedulePos.top) {
            schedule.removeClass('fix');

        }

        if ($(window).scrollTop() >= ((100 * (index+1)) + margin) && newScroll > prevScroll) {
            //alert(index);
            prof.css({
                position: 'fixed',
                height: '50px',
                top: (schedule.height() + (index * 50)) + 'px'
            });
            index++;
        }
        else if ($(window).scrollTop() <= ((100 * (index+1)) + margin) && newScroll < prevScroll) {
            prof.css({
                position: 'static',
                height: '150px'
            });
            index--;    
        }

        prevScroll = newScroll;
    });
});​

Answer 1

我一直忙于其他项目，但我终于开始制作一个具有这种效果的 jQuery 插件。 从此处获取 或 查看演示。