jQueryの衝突要素を検出する

Question

現在、iOSの連絡先アプリに似たアプリケーションを作成しています。スタイルなどは現在重要ではありませんが、私は機能を動作させたいと思います。

私は私が達成しようとしているかを示すためにjsFiddle（http://jsfiddle.net/hpQVy/）を設定している、とここでのコードがあります：

HTML：

<ul class="divided"> 
    <li class="divider">A</li> 
    <li>Andrew Acheson</li> 
    <li>Luke Ayre</li> 
    <li>Luke Ayre</li> 
    <li>Luke Ayre</li> 
    <li>Luke Ayre</li> 
    <li>Luke Ayre</li> 
    <li>Luke Ayre</li> 
    <li>Luke Ayre</li> 
    <li>Luke Ayre</li> 
    <li>Luke Ayre</li> 
    <li class="divider">B</li> 
    <li class="divider">C</li> 
    <li>Charlie Sheen</li> 
    <li>Charlie Sheen</li> 
    <li>Charlie Sheen</li> 
    <li>Charlie Sheen</li> 
    <li>Charlie Sheen</li> 
    <li>Charlie Sheen</li> 
    <li>Charlie Sheen</li> 
    <li>Charlie Sheen</li> 
    <li>Charlie Sheen</li> 
</ul> 

はJavaScript：

$(function() { 
    // First off, dock the first one: 
    $('ul.divided li.divider').eq(0).css({ position: 'fixed' }); 
    $(window).scroll(function() { 

     // 

    }); 
}); 

CSS：

body { 
    padding: 0; 
    margin: 0; 
} 
ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    font-family: Arial; 
} 
    ul li { 
     padding: 10px; 
     border-bottom: 1px solid #000; 
     width: 100%; 
     box-sizing: border-box; 
    } 
     ul li.divider { 
      font-weight: bold; 
      padding: 2px 10px; 
      background-color: #aaa; 
      color: #fff; 
      text-shadow: 0 1px 0 #000; 
      opacity: 0.7; 
     } 

私がしたいのは、リストディバイダの「ドッキング」をシミュレートすることです。私の思考の訓練は、どんな仕切りがドッキングされているものと衝突するかを検出し、それに応じてアニメーションしてドッキングさせることです。私が思う私の質問は、リストの分周器（li.divider）はposition: fixedありli.dividerと衝突したときを検出するための最良の方法は何かということです。私はトップとボトムの両方から衝突を検出する必要があります（それが理にかなっていれば）。

誰もがli要素が衝突する可能性があるときを検出する方法をお勧めしますか？

Answer 1

okが多分これはあなたが探していた答えではありませんが、this pluginを見ています。私はそれがあなたが作成しようとしているものだと思う。