javascript - 在 jQuery 中模拟 iPhone 联系人列表标题样式

Question

我有一个系统警报列表，其中包含与其关联的日期和时间。日期仅在日期发生更改时显示。我希望最上面的日期保留在 #shell 的顶部，直到另一个日期取代它。这与 iPhone 上的联系人应用程序的工作方式非常相似。

我有setup a jsFiddle除了必要的 jQuery 代码之外，其中包含所有内容。如果有人能在这里帮助我，我将非常感激 - 我目前不知道从哪里开始!

HTML 片段:

<div id="shell">
    <div id="alertList">
        <div id="alert_0" class="alert">
            <span class="date">22 Nov, 2012</span>
            <span class="time">02:28</span>
            System alert happened
        </div>
    </div>
</div>

jQuery 代码

$("#shell").scroll(function() {
    //This is where the code would be to lock (or alter the margin-top) of the
    //date would be in order to keep it locked to the top
});​

Answer 1

尝试这段代码......它仍然需要一些工作和重构，但我希望你明白了。 (这也是 jsFiddle 的链接)

var currentElemIndex = 0;
var currentElem = $('#alertList .date:eq(' + currentElemIndex + ')');
var currentElemMarginTop = parseInt(currentElem.css('margin-top'));
var currentElemHeight = currentElem.outerHeight();
var currentElemPosTop = currentElem.position().top;
var nextElem = $('#alertList .date:eq(' + currentElemIndex+1 + ')');
$('#shell').scroll(function (ev) {
    var scrollTop = $('#shell').scrollTop();
    if (scrollTop >= nextElem.position().top - currentElemHeight) {
        currentElemIndex++;
        currentElem.css('margin-top', currentElemMarginTop + 'px');
        currentElem = nextElem;
        currentElemMarginTop = parseInt(currentElem.css('margin-top'));
        currentElemHeight = currentElem.outerHeight();
        currentElemPosTop = currentElem.position().top;
        nextElem = $('#alertList .date:eq(' + currentElemIndex + ')');
    }
    if (scrollTop  > currentElem.position().top) {
        currentElem.css('margin-top', $('#shell').scrollTop() - currentElem.position().top + 'px');
    }
    if (scrollTop < currentElemPosTop) {
        nextElem = currentElem;
        currentElemIndex--;
        currentElem = $('#alertList .date:eq(' + currentElemIndex + ')');
    }
});