jQuery: эффект прокрутки аккордеона - PullRequest
Новая
       15

jQuery: эффект прокрутки аккордеона

2 голосов
/ 17 октября 2010

Я пытаюсь воспроизвести эффект аккордеона при прокрутке вверх и вниз, показанной на веб-сайте Apple: 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;
    });
});​

1 Ответ

2 голосов
/ 17 ноября 2010

Я был занят другими проектами, но, наконец, я нашел способ создать плагин jQuery, который бы делал этот эффект. Получите его отсюда или Проверьте демонстрацию .

...