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插件。 Get it from here或Check out a demo。

jQuery：滚动手风琴效果

1 个答案: