0

日付と時刻が関連付けられたシステムアラートのリストがあります。日付は、日付が変更された場合にのみ表示されます。私が欲しいのは、#shell別の日付がそれを置き換えるまで、一番上の日付が一番上に留まるようにすることです。これは、連絡先アプリがiPhoneでどのように機能するかと非常によく似ています。

必要なjQueryコードをすべて含むjsFiddleをセットアップしました。誰かがここで私を助けてくれるなら、私は非常に感謝するでしょう-私は現在どこから始めればいいのか分かりません！

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
});​
4

2 に答える 2

2

このコードを試してみてください...それでも少しの作業とリファクタリングが必要ですが、アイデアが得られることを願っています。（ここに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 + ')');
    }
});
于 2012-11-23T13:19:35.427 に答える
1

遅くても確実：jsfiddle

$("#shell").scroll(function() {
    // 21 is because of border and padding.
    var firstVisible = parseInt($("#shell").scrollTop() / ($("#shell .alert:first").height() + 21)),
        firstVisibleElem = $("#shell .alert:eq(" + firstVisible + ")"),
        date = firstVisibleElem.data("date");

    if (date != undefined && date != null && date > -1)
        $("#date_" + date).prependTo(firstVisibleElem);
});

// Save the date corresponding to each alert:
var i = -1;
$("#shell .alert").each(function() {
    var date = $(this).find(".date");
    if (date.length > 0) {
        i++;
        date.attr("id", "date_" + i);
    }
    if (i > -1) {
        $(this).data("date", i);
    }
});
于 2012-11-23T13:19:08.703 に答える