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插件來做這個效果。 Get it from here或Check out a demo。