jQuery에서 충돌 요소 감지

Question

현재 iOS의 주소록 앱과 비슷한 애플리케이션을 만드는 중입니다. 스타일 등은 현재 중요하지 않지만 기능을 작동시키고 싶습니다.

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> 

자바 스크립트 :

내가 여기 ( http://jsfiddle.net/hpQVy/)를 달성하기 위해 노력하고있어 무엇을 보여주기 위해 jsFiddle를 설정 한

코드입니다

$(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; 
     } 

내가 원하는 것은 목록 구분선의 도킹을 시뮬레이트하는 것입니다. 내 생각으로는 분할기가 고정되어있는 분할 자와 충돌 할 때이를 감지하고 그에 따라 애니메이션을 고정하고 고정시키는 것입니다. 제 질문은 position: fixed이있는 li.divider과 목록 구분자 (li.divider)가 충돌 할 때를 감지하는 가장 좋은 방법이라고 생각합니다. 나는 꼭대기와 바닥에서 충돌을 감지 할 필요가있다.

아무도 li 요소가 충돌 할 수있는 경우를 감지하는 방법을 권장 할 수 있습니까?

Answer 1

어쩌면 이것은 당신이 찾고 있던 대답이 아니지만, this plugin을보십시오. 나는 그것이 당신이 창조하려고하는 것일 뿐이라고 생각합니다.