jQuery:滚动 Accordion 效果

Question

我试图在苹果网站上显示的上下滚动时重现 Accordion 效果: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 插件。 Get it from here或Check out a demo .