Блог

В настоящее время я работаю над созданием приложения, похожего на приложение «Контакты» на 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 ) сталкивается с разделителем, li.divider который имеет position: fixed . Мне нужно обнаруживать столкновения как сверху, так и снизу (если это имеет смысл).

Кто-нибудь может порекомендовать способ определения того, когда li элементы могут столкнуться?

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