Question

我目前正致力于在iOS上创建类似于Contacts应用程序的应用程序。风格等等现在真的不重要，但我想让功能正常运行。

我已经设置了一个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的{{1}}发生冲突的最佳方法。我需要从顶部和底部检测碰撞（如果这有意义的话）。

有人可以推荐一种检测position: fixed元素何时可能发生碰撞的方法吗？

Answer 1

好吧也许这不是你想要的答案，但看看this plugin。我认为这正是你想要创造的东西

检测jQuery中的碰撞元素

1 个答案: