ここに示すようなスティッキーヘッダー手法を統合しようとしています...永続ヘッダー。
私はそれを自分のコードに統合しようとしましたが、ほとんどの場合成功しましたが、正しく動作しておらず、本当に理解できません。
それが使用されているページが何をするのかを簡単に説明しようと思います。学生の表と評価の別の表を含むデータベースがあります。このページは、JSONオブジェクト（PHPスクリプトを介してデータベースから受信）をループし、その最初のオブジェクトの各学生について、評価とともに別のJSONをフェッチします。これはすべて正常に機能します。ただし、かなり長いページが作成されます。見た目はこんな感じ…
上記のチュートリアルに基づいて作成したコードは、クラスで指定されたヘッダーのクローンを作成し、scrollTopを含む要素の位置と長さを含むロジックに基づいて、ヘッダーを非表示または表示することになっています。これは、ヘッダーが属するコンテナーがまだ表示されている間、ヘッダーがページの上部に貼り付く効果があります。
問題は、問題が発生していることです。すべてのヘッダーが順番に表示されているのは早すぎますが、さまざまな長さの時間でハングしているように見えます。これらの長さは、それが属するコンテナーの長さに相関しているようです。
だから私のコード...
まず、ヘッダーを更新するために使用される関数...
containerArray = new Array;
positionArray = new Array;
floatingHeaderArray = new Array;
function updateTableHeaders() {
$(".studentContainer").each(function(i) {
containerArray[i] = $(this);
var position = containerArray[i].position();
positionArray[i] = position.top;
var scrollTop = $("#main").scrollTop();
floatingHeaderArray[i] = $(".floatingHeader", this);
if ((scrollTop > positionArray[i]) && (scrollTop < positionArray[i] + containerArray[i].outerHeight(true))) {
floatingHeaderArray[i].css({
"visibility": "visible"
});
} else {
floatingHeaderArray[i].css({
"visibility": "hidden"
});
};
});
}
次に、コンテナー、ヘッダー、およびタブを生成するコード。
$("#mainContent").fadeIn(0);
loadMessage = "Loading data for " + event.target.id;
$.getJSON('php/oneFullClass.php?techClass=' + event.target.id, function(data) {
$('#mainTitle').fadeOut(0);
$('#action').html('You are ' + actionIntent + 'ing ' + event.target.id);
$('#action').fadeIn(300);
$('#mainTitle').fadeIn(300);
$('#mainContent').append('<div id="scrollTopDisplay"></div>')
dynamicPositioning();
$.each(data, function(key, val) {
var thisPosition = positionArray[0]
$('#mainContent').append(
'<div class="studentContainer studentView" id="' + val.idStudent + '">' +
'<div class="studentName">' + val.name + ' ' + val.surname + ' - (' + val.form.substr(0, 1) + '/' + val.form.substr(1, 2) + ')</div>' +
'<div class="floatingHeader">' + val.name + ' ' + val.surname + ' - (' + val.form.substr(0, 1) + '/' + val.form.substr(1, 2) + ')</div>' +
'<div class="studentTarget"> Target: <strong>' + val.target + '</strong></div>' +
'</div>');
$(".studentContainer").hide().each(function(i) {
//$(this).slideDown(0);
$(this).delay(i * 50).slideDown(300).fadeIn(500);
})
//Get previous assessments for this student and build tabs
buildTabs('php/allPreviousAssess.php?sid=' + val.idStudent, val.idStudent);
});
});
$('#mainContent').append('<div id="expandAll" onClick="expandAll()">Expand</div>');
$('#mainContent').append('<div id="collapseAll" onClick="collapseAll()">Collapse</div>');
dynamicPositioning();
$('#expandAll').delay(300).fadeIn(300);
$('#collapseAll').delay(300).fadeIn(300);
$("#main").scroll(updateTableHeaders);
必要な情報はこれですべてだと思いますが、理解に役立つと思われる場合は、このコードで参照される可能性のある他のコードを投稿します。
問題は、位置の値をいじる「評価カード」で使用しているアニメーションスライドに関係しているのではないか、またはposition（）が非表示の要素の位置を取得できない可能性があるのではないかと疑っています。ただし、すべてのスクロールイベントでupdateTableHeaders（）を呼び出すので、レイアウトへのアクセスが許可されるまでにすべてのアニメーションが終了するため、これは問題にはなりません（すべてのAJAX要求が発生すると消えるモーダルシェード効果があります）完了。
私は誰かが助けてくれることを願っています、これは私を不幸にしています！:(